/* ==========================================================================
   TruBlink custom styles — campus-eg.com (eduma-child)
   ========================================================================== */

/* ---- Course "Course Features": hide always-empty curriculum stats -------- */
.thim-course-info .lectures-feature,
.thim-course-info .quizzes-feature,
.thim-course-info .activities-feature,
.thim-course-info .assessments-feature { display: none !important; }

/* ---- Course "Course Features": hide Duration on every course (not shown
   at all anymore, regardless of whether a real value is set) ------------- */
.thim-course-info .duration-feature { display: none !important; }

/* ---- Native forms (CF7): match the clean Contact-page look ---------------- */
/* Text fields inherit the theme's CF7 styling automatically (placeholder style).
   These rules only add what the theme doesn't cover: labels, selects, checkboxes. */
.tb-field-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin: 2px 0 8px;
	text-transform: none;
	line-height: 1.3;
}
.wpcf7-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 1.4;
}
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
	display: inline-block;
	margin: 0 18px 8px 0;
	font-weight: 400;
}
.trublink-form { max-width: 640px; }
.trublink-form p { margin: 0 0 14px; }

/* ---- Tabs Shortcode: turn the plain list into a clean tab bar ------------- */
.tabs-shortcode .tabs-shortcode-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 2px solid #ececec;
}
.tabs-shortcode .tabs-shortcode-list li { margin: 0; padding: 0; }
.tabs-shortcode .tabs-shortcode-list li:before { display: none !important; content: none !important; }
.tabs-shortcode .tabs-shortcode-list li a {
	display: block;
	padding: 10px 18px;
	background: #f4f4f4;
	color: #333;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid #ececec;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	transition: all .15s ease;
}
.tabs-shortcode .tabs-shortcode-list li a:hover { background: #eaeaea; }
.tabs-shortcode .tabs-shortcode-list li.active a,
.tabs-shortcode .tabs-shortcode-list li a.active,
.tabs-shortcode .tabs-shortcode-list li a.selected { background: #dd3333; color: #fff; border-color: #dd3333; }
.tabs-shortcode .tab_content,
.tabs-shortcode .tabs-shortcode-content { padding: 22px 2px; }

/* NOTE: the earlier ".smicon-box" circle rule was removed — it clipped icon-box
   text elsewhere on the site. The stretched service circles will be addressed
   with a precise selector once confirmed, without affecting any text. */

/* ---- Interactive tabs: clear floated content inside each panel ----------- */
.tabs-shortcode::after { content: ""; display: table; clear: both; }

/* ---- Course content images: smaller & placed beside the text -------------
   `:not(.tb-tabs-host)` keeps these off the new course-sections component.
   The class is added by trublink-course-tabs.js once it has rebuilt a tabs
   block, so these rules still style the plugin's original markup — which is
   what a visitor sees if that script fails to load — but stop overriding the
   component's own image sizing, which they otherwise would at (0,2,1).      */
.single-lp_course .tabs-shortcode:not( .tb-tabs-host ) img,
.single-lp_course .course-content .tabs-shortcode:not( .tb-tabs-host ) img {
	max-width: 360px;
	height: auto;
	float: right;
	margin: 6px 0 16px 26px;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .10 );
}
@media ( max-width: 640px ) {
	.single-lp_course .tabs-shortcode:not( .tb-tabs-host ) img {
		float: none;
		display: block;
		margin: 0 auto 16px;
		max-width: 100%;
	}
}

/* ---- Trim excess white space on single course pages (safe: :empty only) --- */
body.single-lp_course .thim-related-course:empty { display: none !important; }

/* ---- TruBlink: "Developed By" footer attribution -------------------------- */
/* Renders INLINE in the .copyright-area row (overridden parent
   thim_print_copyright in the child theme's functions.php). The bar's
   background is forced to inherit the main footer color so the two never
   diverge (the parent theme exposes them as separate Customizer fields).   */

/* Force the copyright bar to share the footer's background — never diverge. */
.copyright-area {
	background: var( --thim-footer-bg-color ) !important;
}

/* Tighten the big vertical gap (parent default is 30px/30px) and remove
   the visible top border that creates a seam between footer and copyright. */
.copyright-area .copyright-content {
	padding-top: 14px;
	padding-bottom: 14px;
	border-top: 0;
}

/* Stack the two columns: copyright text on top, TruBlink logo centered below. */
.copyright-area .trublink-copyright-row > div {
	width: 100%;
	text-align: center;
}
.copyright-area .trublink-credit-col {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}
.copyright-area .text-copyright { margin: 0; }

/* Make text white (parent default #999 gray looks washed-out). */
.copyright-area,
.copyright-area .text-copyright {
	color: #fff;
}

/* The "Developed By" link itself. */
.at-footer-powered {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.at-footer-powered:hover,
.at-footer-powered:focus {
	color: #fff;
	text-decoration: none;
}
.at-footer-powered img {
	display: block;
	width: 75px;
	height: auto;
}
@media ( max-width: 640px ) {
	.at-footer-powered img { width: 64px; }
}

/* ---- TruBlink: floating WhatsApp contact button --------------------------- */
/* Markup is printed on wp_footer by trublink_whatsapp_button() in
   functions.php. Stacked directly ABOVE the theme's #back-to-top control
   (position:fixed; bottom:15px; right:20px; 40px square; z-index:997) so the
   two never overlap. Uses WhatsApp brand green #25D366.                      */
.trublink-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 68px; /* clears #back-to-top: 15px bottom + 40px tall + 13px gap */
	z-index: 998; /* above #back-to-top (997), below modals//dropdowns        */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .28 );
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	-webkit-tap-highlight-color: transparent;
	/* The button is icon-only. Eduma defines no global .screen-reader-text rule,
	   so any text node inside here would render VISIBLY and blow the circle
	   apart. These three keep it icon-only no matter what: the accessible name
	   comes from aria-label, never from on-screen text. */
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
.trublink-whatsapp:hover,
.trublink-whatsapp:focus {
	background: #1da851;
	color: #fff;
	transform: scale( 1.08 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .34 );
	text-decoration: none;
}
/* Keyboard focus must stay clearly visible (the theme resets link outlines). */
.trublink-whatsapp:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.trublink-whatsapp__icon {
	display: block;
	width: 28px;
	height: 28px;
	pointer-events: none;
}

/* Course landing pages push #back-to-top up to bottom:75px — follow it. */
body.course-landing-active .trublink-whatsapp { bottom: 128px; }

/* Slightly smaller on phones, and tucked in to match the theme's spacing. */
@media ( max-width: 640px ) {
	.trublink-whatsapp {
		right: 15px;
		bottom: 62px;
		width: 46px;
		height: 46px;
	}
	.trublink-whatsapp__icon { width: 25px; height: 25px; }
	body.course-landing-active .trublink-whatsapp { bottom: 122px; }
}

/* Respect users who ask for reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.trublink-whatsapp { transition: none; }
	.trublink-whatsapp:hover,
	.trublink-whatsapp:focus { transform: none; }
}