/* ==========================================================================
   Skills Falcons — Visual Redesign Layer v3
   Design: deep navy (#0c1a3d) × emerald teal (#0d8577) × cool off-white (#f5f7ff)
   Purpose-built for an Arabic-first LMS + digital-book ecommerce.
   Additive only — no parent files modified.

   v3 replaces the previous heritage-gold accent with emerald teal. The two
   teal steps are chosen for contrast, not just for looks:
     --ta-teal        4.53:1 on white  → safe for body text AND as a button
                                         background carrying white label text
     --ta-teal-bright 2.5:1 on white   → decorative only; use it exclusively on
                                         the navy bands where it needs to pop
   ========================================================================== */

/* ---- 0. Design tokens -------------------------------------------------- */
:root {
	--ta-navy:        #0c1a3d;
	--ta-navy-mid:    #1a3166;
	--ta-navy-soft:   #e8edf8;
	--ta-teal:        #0d8577;
	--ta-teal-deep:   #0a6459;
	--ta-teal-bright: #14b8a6;
	--ta-teal-pale:   #d6f5f0;
	--ta-bg:          #f5f7ff;
	--ta-white:       #ffffff;
	--ta-text:        #111827;
	--ta-muted:       #6b7a99;
	--ta-border:      rgba(12, 26, 61, 0.10);
	--ta-shadow-card: 0 4px 24px -6px rgba(12, 26, 61, 0.13);
	--ta-shadow-lift: 0 16px 40px -12px rgba(12, 26, 61, 0.22);
	--ta-shadow-teal: 0 6px 24px -4px rgba(13, 133, 119, 0.45);
	--ta-radius-card: 18px;
	--ta-radius-btn:  50px;
	--ta-ease:        cubic-bezier(0.22, 1, 0.36, 1);

	/* keep existing theme tokens coherent */
	--thim-font-body-font-family: 'Tajawal', 'Roboto', sans-serif;
	--thim-body-primary-color: #0d8577;
	--thim-font-body-color: #111827;
	--thim-font-title-color: #0c1a3d;
	--thim-placeholder-color: #9aa3b8;
}

/* ---- 1. Typography ---------------------------------------------------- */
body,
button, input, select, textarea {
	font-family: 'Tajawal', 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.sc_heading .title,
.thim-heading .heading-title,
.course-title {
	font-family: 'Cairo', 'Roboto Slab', sans-serif;
	letter-spacing: -0.01em;
}

/* Arabic copy reads better with a little more line height than the
   theme's Latin-tuned default. */
p, li, .description {
	line-height: 1.8;
}

/* ---- 2. Global base --------------------------------------------------- */
body {
	background-color: var(--ta-white);
	color: var(--ta-text);
}

::selection {
	background: var(--ta-teal);
	color: var(--ta-white);
}

a { transition: color 0.2s ease; }

/* --ta-teal clears 3:1 against both white and the navy bands, so one focus
   colour works everywhere on the site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--ta-teal);
	outline-offset: 3px;
	border-radius: 4px;
}

hr {
	border: 0;
	height: 1px;
	background: var(--ta-border);
}

blockquote {
	border-inline-start: 4px solid var(--ta-teal);
	background: var(--ta-teal-pale);
	padding: 18px 22px;
	border-radius: 0 var(--ta-radius-card) var(--ta-radius-card) 0;
	color: var(--ta-navy);
}

/* ---- 3. Hero section -------------------------------------------------- */
/*
 * Container 24580b9: outer boxed flex row
 * 04a2ec0: left child  → holds the hero image
 * c10a5dc: right child → holds heading + body text + CTA
 *
 * RTL naturally puts first child on the RIGHT.
 * row-reverse flips it: image goes LEFT, text goes RIGHT.
 */
.elementor-element-24580b9 {
	background: linear-gradient(145deg, var(--ta-navy) 0%, #142756 55%, #0c2248 100%);
	padding: 60px 0 0 !important;
	position: relative;
	overflow: hidden;
}

/* Decorative ring behind hero image */
.elementor-element-24580b9::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 60px solid rgba(20, 184, 166, 0.08);
	top: -80px;
	left: -100px;
	pointer-events: none;
}

.elementor-element-24580b9::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(20, 184, 166, 0.06);
	bottom: 30px;
	right: 8%;
	pointer-events: none;
}

/* Flip column order: image LEFT, text RIGHT */
.elementor-element-24580b9 > .e-con-inner {
	flex-direction: row-reverse !important;
	align-items: flex-end !important;
	min-height: 82vh;
}

/* Image column — sits at the bottom of the hero */
.elementor-element-04a2ec0 {
	position: relative;
	align-self: flex-end !important;
}

.elementor-element-04a2ec0 img {
	display: block;
	max-height: 540px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 -8px 32px rgba(0,0,0,0.35));
	position: relative;
	z-index: 1;
}

/* Subtle teal glow behind the hero image */
.elementor-element-04a2ec0::after {
	content: "";
	position: absolute;
	width: 85%;
	height: 60%;
	background: radial-gradient(ellipse at 50% 80%, rgba(20,184,166,0.20) 0%, transparent 70%);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Text column */
.elementor-element-c10a5dc {
	padding: 40px 40px 80px 20px !important;
	align-self: center !important;
}

/* Hero H2 — "اطمح ، تعلّم ، تقدّم" */
.elementor-element-71bd591 .elementor-heading-title {
	color: var(--ta-white) !important;
	font-family: 'Cairo', sans-serif !important;
	font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-wrap: balance;
	text-align: end !important;
}

/* Teal underline on hero headline */
.elementor-element-71bd591 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ta-teal-bright);
	border-radius: 2px;
	margin: 16px 0 0 auto;
}

/* Hero body text */
.elementor-element-17ad38c,
.elementor-element-17ad38c p {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
	line-height: 1.75 !important;
	text-align: end !important;
}

/* Hero CTA button */
.elementor-element-f69a86f .elementor-button {
	background: linear-gradient(135deg, var(--ta-teal) 0%, var(--ta-teal-deep) 100%) !important;
	color: var(--ta-white) !important;
	fill: var(--ta-white) !important;
	border-radius: var(--ta-radius-btn) !important;
	font-family: 'Cairo', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 14px 36px !important;
	border: none !important;
	box-shadow: var(--ta-shadow-teal) !important;
	transition: transform 0.25s var(--ta-ease), box-shadow 0.25s var(--ta-ease) !important;
}

.elementor-element-f69a86f .elementor-button:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 14px 32px -6px rgba(13, 133, 119, 0.6) !important;
}

/* ---- 4. Logo / brand strip (ee12bdf) ---------------------------------- */
.elementor-element-ee12bdf {
	background: var(--ta-white) !important;
	border-top: 1px solid var(--ta-border) !important;
	border-bottom: 1px solid var(--ta-border) !important;
	padding: 24px 0 !important;
	min-height: unset !important;
}

.elementor-element-ee12bdf img {
	filter: grayscale(100%) brightness(0.6);
	opacity: 0.65;
	transition: filter 0.3s, opacity 0.3s;
}

.elementor-element-ee12bdf img:hover {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* Right-side heading in the partner strip */
.elementor-element-57533a6 .elementor-heading-title,
.elementor-element-a2064c9 .elementor-heading-title {
	color: var(--ta-navy) !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	font-weight: 800 !important;
}

/* ---- 5. Section rhythm — shared headings ------------------------------ */
.sc_heading .title,
.thim-heading .heading-title,
.elementor-heading-title {
	color: var(--ta-navy);
}

/* Teal accent underline on all section headings */
.sc_heading,
.thim-heading {
	position: relative;
}

.sc_heading .title::after,
.thim-heading .heading-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--ta-teal);
	border-radius: 2px;
	margin: 12px auto 0;
}

/* ---- 6. Courses section (a57ecee) ------------------------------------- */
.elementor-element-a57ecee {
	background: var(--ta-white) !important;
	padding-top: 60px !important;
	padding-bottom: 20px !important;
}

/* ---- 7. Digital products section (b70affa) ----------------------------- */
.elementor-element-b70affa {
	background: var(--ta-bg) !important;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

/* ---- 8. Course & product cards ----------------------------------------- */
.thim-course-item,
.course-item,
.thim-post-item,
li.type-lp_course,
.learnpress .learnpress-courses .course-item,
.woocommerce ul.products li.product,
.woocommerce ul.product-grid li.product {
	background: var(--ta-white) !important;
	border-radius: var(--ta-radius-card) !important;
	box-shadow: var(--ta-shadow-card) !important;
	border: 1px solid var(--ta-border) !important;
	overflow: hidden;
	transition: transform 0.3s var(--ta-ease), box-shadow 0.3s var(--ta-ease), border-color 0.3s ease !important;
}

.thim-course-item:hover,
.course-item:hover,
li.type-lp_course:hover,
.woocommerce ul.products li.product:hover,
.woocommerce ul.product-grid li.product:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--ta-shadow-lift) !important;
	border-color: rgba(13, 133, 119, 0.35) !important;
}

/* Course image */
.thim-course-item .course-thumbnail,
.thim-course-item img,
li.type-lp_course img,
.woocommerce ul.products li.product img,
.woocommerce ul.product-grid li.product img {
	border-radius: var(--ta-radius-card) var(--ta-radius-card) 0 0;
}

/* Course thumbnails get the same slow zoom the product cards already had. */
.thim-course-item .course-thumbnail,
li.type-lp_course .course-thumbnail {
	overflow: hidden;
}

.thim-course-item .course-thumbnail img,
li.type-lp_course .course-thumbnail img {
	transition: transform 0.45s var(--ta-ease);
}

.thim-course-item:hover .course-thumbnail img,
li.type-lp_course:hover .course-thumbnail img {
	transform: scale(1.05);
}

/* Course price */
.price, .course-price,
.lp-course-price,
.woocommerce .price {
	color: var(--ta-teal) !important;
	font-weight: 700;
}

/* Free courses read as a badge rather than a price. */
.course-price .free,
.lp-course-price .free {
	background: var(--ta-teal-pale);
	color: var(--ta-teal-deep) !important;
	padding: 2px 12px;
	border-radius: var(--ta-radius-btn);
	font-size: 0.9em;
}

/* "View all" / section CTA buttons */
.elementor-element-4b33cdd .elementor-button,
.elementor-element-2156965 .elementor-button {
	border-radius: var(--ta-radius-btn) !important;
	font-weight: 700 !important;
	font-family: 'Cairo', sans-serif !important;
	transition: transform 0.25s var(--ta-ease), box-shadow 0.25s var(--ta-ease) !important;
}

.elementor-element-4b33cdd .elementor-button:hover,
.elementor-element-2156965 .elementor-button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px -6px rgba(12, 26, 61, 0.3) !important;
}

/* ---- 9. "Sign up now" section (749413db) -------------------------------- */
.elementor-element-749413db .elementor-background-overlay {
	background: linear-gradient(135deg, rgba(12,26,61,0.85) 0%, rgba(10,100,89,0.62) 100%) !important;
}

.elementor-element-749413db .sc_heading .title {
	color: var(--ta-white) !important;
}

/* ---- 10. "Why choose us" section (135e925) ----------------------------- */
.elementor-element-135e925 {
	background: var(--ta-navy) !important;
	padding: 80px 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-element-135e925 .sc_heading .title,
.elementor-element-135e925 .thim-heading .heading-title {
	color: var(--ta-white) !important;
}

.elementor-element-135e925 .sc_heading .title::after {
	background: var(--ta-teal-bright) !important;
}

/* Icon boxes on navy bg */
.elementor-element-135e925 .thim-widget-icon-box {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: var(--ta-radius-card) !important;
	padding: 32px 24px !important;
	transition: background 0.3s, transform 0.3s var(--ta-ease), box-shadow 0.3s, border-color 0.3s !important;
}

.elementor-element-135e925 .thim-widget-icon-box:hover {
	background: rgba(20, 184, 166, 0.10) !important;
	border-color: rgba(20, 184, 166, 0.35) !important;
	transform: translateY(-5px) !important;
	box-shadow: 0 16px 40px -10px rgba(0,0,0,0.4) !important;
}

/* SVG icons — tint bright teal so they carry on the navy band */
.elementor-element-135e925 .thim-widget-icon-box svg path,
.elementor-element-135e925 .thim-widget-icon-box svg circle,
.elementor-element-135e925 .thim-widget-icon-box svg rect {
	fill: var(--ta-teal-bright) !important;
	stroke: var(--ta-teal-bright) !important;
}

.elementor-element-135e925 .boxes-icon {
	margin-bottom: 20px;
}

/* Icon box title and description text */
.elementor-element-135e925 .box-title,
.elementor-element-135e925 .title-box {
	color: var(--ta-white) !important;
	font-weight: 700 !important;
}

.elementor-element-135e925 .box-content,
.elementor-element-135e925 .content-box,
.elementor-element-135e925 p {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* ---- 11. Footer -------------------------------------------------------- */
#colophon,
footer.site-footer,
.elementor-8920 {
	background: var(--ta-navy) !important;
	color: rgba(255,255,255,0.75) !important;
}

#colophon a,
footer.site-footer a,
.elementor-8920 a {
	color: rgba(255,255,255,0.75);
	transition: color 0.2s;
}

#colophon a:hover,
footer.site-footer a:hover,
.elementor-8920 a:hover {
	color: var(--ta-teal-bright);
}

.elementor-8920 .sc_heading .title,
.elementor-8920 .thim-heading .heading-title {
	color: var(--ta-white) !important;
}

.thim-copyright {
	background: rgba(0,0,0,0.25) !important;
	color: rgba(255,255,255,0.5) !important;
}

/* ---- 12. Header / nav refinements ------------------------------------- */
#masthead {
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.thim-sticky-active #masthead,
#masthead.sticky-on,
#masthead.affix {
	box-shadow: 0 2px 20px rgba(12, 26, 61, 0.10) !important;
	backdrop-filter: saturate(140%) blur(6px);
}

/* Toolbar strip top of header */
#toolbar {
	background: var(--ta-navy) !important;
}

/* Menu hover gets a growing teal rule instead of a colour-only change. */
#masthead .main-menu > li > a {
	position: relative;
}

#masthead .main-menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 2px;
	/* --ta-teal, not the bright step: the header is transparent over the navy
	   hero on the front page but solid white on inner pages, and only the
	   darker teal stays legible on both. */
	background: var(--ta-teal);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: width 0.25s var(--ta-ease);
}

#masthead .main-menu > li:hover > a::after,
#masthead .main-menu > li.current-menu-item > a::after {
	width: 60%;
}

/* ---- 13. Buttons — global --------------------------------------------- */
/*
   Elementor emits its button colours into generated post-*.css files, not
   inline style attributes, so those colours cannot be re-skinned from here —
   they are recoloured at the source (DB) instead. What is left for this layer
   is the shared shape and motion, plus the theme's own button classes.
*/
.elementor-button,
.thim-button,
button.button,
a.button,
.learn-press-button,
input[type="submit"] {
	border-radius: var(--ta-radius-btn) !important;
	font-family: 'Cairo', sans-serif !important;
	font-weight: 700 !important;
	transition: transform 0.25s var(--ta-ease), box-shadow 0.25s var(--ta-ease), background-color 0.25s ease !important;
}

.elementor-button:hover,
.thim-button:hover,
button.button:hover,
a.button:hover,
.learn-press-button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
}

/* Theme/LearnPress/Woo primary buttons — the DB now feeds these teal, this
   just guarantees a readable label and a matching lift. */
button.button,
a.button,
.learn-press-button,
input[type="submit"],
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	color: var(--ta-white) !important;
	box-shadow: 0 4px 14px -4px rgba(13, 133, 119, 0.4);
}

/* RevSlider primary button (if any) */
.rev-btn.thim-slider-button {
	background: linear-gradient(135deg, var(--ta-teal), var(--ta-teal-deep)) !important;
	color: var(--ta-white) !important;
	border-radius: var(--ta-radius-btn) !important;
}

/* ---- 14. Login/register popup buttons --------------------------------- */
.thim-link-login a {
	font-family: 'Cairo', sans-serif;
	font-weight: 600;
}

/* ---- 15. Responsive — mobile ------------------------------------------ */
@media (max-width: 1024px) {
	.elementor-element-24580b9 > .e-con-inner {
		flex-direction: column !important;
		min-height: unset !important;
		align-items: stretch !important;
	}

	.elementor-element-04a2ec0 {
		order: -1;
	}

	.elementor-element-04a2ec0 img {
		max-height: 340px;
		width: auto;
		margin: 0 auto;
	}

	.elementor-element-c10a5dc {
		padding: 32px 20px 40px !important;
	}

	.elementor-element-71bd591 .elementor-heading-title {
		font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
		text-align: center !important;
	}

	.elementor-element-71bd591 .elementor-heading-title::after {
		margin: 12px auto 0 !important;
	}

	.elementor-element-17ad38c,
	.elementor-element-17ad38c p {
		text-align: center !important;
	}

	.elementor-element-f69a86f {
		text-align: center !important;
	}

	.elementor-element-24580b9::before,
	.elementor-element-24580b9::after {
		display: none;
	}
}

/* ---- 16. Digital products grid — المنتجات الرقمية ---------------------- */
/*
   Eduma renders the Elementor "Products" widget as <ul class="product-grid">,
   not WooCommerce's default <ul class="products">, which is why section 8
   carries a .product-grid selector alongside the stock one. Everything below
   is the interior of those cards plus the section band they sit on.
   Layout is left to Elementor — only spacing and skin are set here.
*/

/* The heading (b70affa) and the grid (6e6ef0f) are separate Elementor
   elements. Carry one background across both so the section reads as a
   single band rather than two stacked strips. */
.elementor-element-b70affa {
	padding-bottom: 28px !important;
}

.elementor-element-6e6ef0f {
	background: var(--ta-bg);
	padding-bottom: 64px;
}

.woocommerce ul.product-grid {
	margin-bottom: 0;
}

.woocommerce ul.product-grid li.product {
	padding: 0 0 20px;
	margin-bottom: 28px;
	text-align: center;
}

/* One lone product should not stretch into a billboard. */
.woocommerce ul.product-grid li.product:only-child {
	max-width: 340px;
	margin-inline: auto;
}

/* Media — uniform crop so mixed-ratio covers still line up. */
.woocommerce ul.product-grid li.product .product_thumb {
	position: relative;
	overflow: hidden;
	background: var(--ta-navy-soft);
}

.woocommerce ul.product-grid li.product .product_thumb img {
	width: 100%;
	height: auto;
	/* WooCommerce generates catalog thumbs at 300x300 hard-cropped, so 1:1
	   keeps book covers uniform without cropping them a second time. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.45s var(--ta-ease);
}

.woocommerce ul.product-grid li.product:hover .product_thumb img {
	transform: scale(1.05);
}

/* Quick-view affordance — hidden until the card is engaged. */
.woocommerce ul.product-grid li.product .quick-view a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ta-white);
	color: var(--ta-navy);
	box-shadow: var(--ta-shadow-card);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s var(--ta-ease), background 0.2s, color 0.2s;
}

.woocommerce ul.product-grid li.product:hover .quick-view a,
.woocommerce ul.product-grid li.product .quick-view a:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.woocommerce ul.product-grid li.product .quick-view a:hover {
	background: var(--ta-teal);
	color: var(--ta-white);
}

/* Text block */
.woocommerce ul.product-grid li.product .product__title {
	padding: 20px 18px 0;
}

.woocommerce ul.product-grid li.product .product__title .title {
	display: block;
	font-family: 'Cairo', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ta-navy);
	transition: color 0.2s ease;
}

.woocommerce ul.product-grid li.product .product__title .title:hover {
	color: var(--ta-teal);
}

.woocommerce ul.product-grid li.product .block-after-title {
	margin-top: 8px;
}

.woocommerce ul.product-grid li.product .price {
	font-family: 'Cairo', sans-serif;
	font-size: 20px;
}

.woocommerce ul.product-grid li.product .description {
	margin-top: 10px;
	color: var(--ta-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

.woocommerce ul.product-grid li.product .description p {
	margin-bottom: 0;
}

/* Add to cart — the section's primary action. */
.woocommerce ul.product-grid li.product .add_to_cart_button {
	display: inline-block;
	margin: 18px 18px 0;
	padding: 11px 26px;
	border-radius: var(--ta-radius-btn);
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	border: 0;
	transition: background 0.25s ease, transform 0.25s var(--ta-ease), box-shadow 0.25s ease;
}

.woocommerce ul.product-grid li.product .add_to_cart_button:hover,
.woocommerce ul.product-grid li.product .add_to_cart_button:focus-visible {
	background: var(--ta-teal-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(13, 133, 119, 0.45);
}

/* Keyboard focus stays visible against the teal. */
.woocommerce ul.product-grid li.product a:focus-visible {
	outline: 3px solid var(--ta-navy-mid);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.elementor-element-6e6ef0f {
		padding-bottom: 40px;
	}

	.woocommerce ul.product-grid li.product .product__title {
		padding: 16px 12px 0;
	}

	.woocommerce ul.product-grid li.product .product__title .title {
		font-size: 16px;
	}

	.woocommerce ul.product-grid li.product .add_to_cart_button {
		margin: 14px 12px 0;
		padding: 10px 20px;
	}
}

/* ==========================================================================
   v3 additions — site-wide polish beyond the home page
   ========================================================================== */

/* ---- 18. Form fields --------------------------------------------------- */
/*
   Checkout, login, course search and comment forms all inherit the theme's
   square 1px fields. Rounding them and giving focus a teal ring makes the
   commerce path feel like the rest of the redesign.
*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
	border: 1px solid var(--ta-border) !important;
	border-radius: 12px !important;
	background-color: var(--ta-white);
	color: var(--ta-text);
	padding: 11px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--ta-teal) !important;
	box-shadow: 0 0 0 3px rgba(13, 133, 119, 0.15) !important;
	outline: none;
}

::placeholder {
	color: var(--ta-muted);
	opacity: 1;
}

/* Checkboxes and radios pick up the accent without custom markup. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--ta-teal);
}

/* ---- 19. WooCommerce commerce chrome ----------------------------------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
	border-radius: var(--ta-radius-btn);
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	padding: 4px 14px;
	min-height: unset;
	line-height: 1.6;
}

/* Store notices: teal for success, kept red/amber for error and warning so
   the semantic meaning still survives the recolour. */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--ta-teal) !important;
	background: var(--ta-teal-pale);
	border-radius: 12px;
	color: var(--ta-navy);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ta-teal) !important;
}

.woocommerce-error {
	border-radius: 12px;
}

/* Cart badge in the header */
.thim-cart-count,
.cart-contents-count,
.mini-cart-counter {
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
}

/* ---- 20. Pagination ---------------------------------------------------- */
.page-numbers,
.learn-press-pagination .page-numbers li a,
.learn-press-pagination .page-numbers li span {
	border-radius: 10px !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-numbers:hover,
.learn-press-pagination .page-numbers li a:hover {
	background: var(--ta-teal-pale) !important;
	color: var(--ta-teal-deep) !important;
}

.page-numbers.current,
.learn-press-pagination .page-numbers li span.current {
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
	border-color: var(--ta-teal) !important;
}

/* ---- 21. Back-to-top --------------------------------------------------- */
/* Parent theme markup: <div class="scroll-to-top" id="back-to-top">.
   Only skin and motion are touched — positioning stays with the theme so its
   show/hide JS keeps working. */
#back-to-top.scroll-to-top {
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 24px -6px rgba(13, 133, 119, 0.55);
	transition: background 0.25s ease, transform 0.25s var(--ta-ease), box-shadow 0.25s ease;
}

#back-to-top.scroll-to-top:hover {
	background: var(--ta-teal-deep) !important;
	transform: translateY(-4px);
}

#back-to-top.scroll-to-top svg circle {
	stroke: var(--ta-teal-bright) !important;
}

/* ---- 22. Scrollbar ----------------------------------------------------- */
* {
	scrollbar-color: var(--ta-teal) var(--ta-navy-soft);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ta-navy-soft);
}

::-webkit-scrollbar-thumb {
	background: var(--ta-teal);
	border-radius: 10px;
	border: 2px solid var(--ta-navy-soft);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ta-teal-deep);
}

/* ---- 23. Anchor scrolling --------------------------------------------- */
/* The header is sticky, so in-page anchors would otherwise land underneath
   it. 120px clears the toolbar + menu at desktop height. */
html {
	scroll-behavior: smooth;
}

:target,
[id] {
	scroll-margin-top: 120px;
}

/* ---- 24. Course single / LearnPress accents ---------------------------- */
.learn-press-tabs .learn-press-tabs__tab.active > label,
.learn-press-tabs .learn-press-tabs__tab > label:hover {
	color: var(--ta-teal) !important;
	box-shadow: inset 0 -3px 0 var(--ta-teal);
}

.course-progress .progress-bg .progress-active,
.learn-press-progress .progress-bg .progress-active,
.lp-progress-bar__active {
	background: linear-gradient(90deg, var(--ta-teal), var(--ta-teal-bright)) !important;
}

/* Curriculum items: give the completed state the accent too. */
.course-curriculum .section-content .course-item.has-status-completed .item-name {
	color: var(--ta-teal-deep) !important;
}

/* ---- 25. Page title / breadcrumb bar ----------------------------------- */
.page-title-bar,
.top-section-page,
#thim-content-page-title {
	position: relative;
}

.breadcrumbs a:hover,
.breadcrumb a:hover,
.thim-breadcrumbs a:hover {
	color: var(--ta-teal-bright);
}

/* ---- 26. Skip link ----------------------------------------------------- */
.skip-link:focus {
	background: var(--ta-teal) !important;
	color: var(--ta-white) !important;
	border-radius: 0 0 12px 0;
	padding: 12px 20px;
	z-index: 100000;
}

/* ---- 27. Last hardcoded parent-theme oranges --------------------------- */
/*
   Two accent values are baked into eduma/style.css and its woocommerce lib as
   literals rather than theme-mod output, so recolouring the database does not
   reach them. Redefining the custom property covers the mobile bar; the star
   rating has no property at all, hence the direct rule.
*/
:root {
	--nav-mobile-color-hover: #0d8577;
}

.navbar-mobile-button .item-menubar.active,
.navbar-mobile-button .item-menubar:hover {
	color: var(--ta-teal) !important;
}

.woocommerce .star-rating:before,
.woocommerce .star-rating span:before,
.woocommerce-page .star-rating:before,
.woocommerce-page .star-rating span:before {
	color: var(--ta-teal) !important;
}

/* ---- 17. Motion-reduction respect ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	/* Kill the hover lifts outright — a 0ms transition still moves the card. */
	.thim-course-item:hover,
	.course-item:hover,
	li.type-lp_course:hover,
	.woocommerce ul.products li.product:hover,
	.woocommerce ul.product-grid li.product:hover,
	.elementor-button:hover,
	.thim-button:hover,
	button.button:hover,
	a.button:hover,
	input[type="submit"]:hover,
	#back-to-top.scroll-to-top:hover {
		transform: none !important;
	}
}