/**
 * G4L AICerts — storefront styling for imported course content.
 *
 * Everything is scoped under .g4l-course so it never leaks into the theme.
 * Design language mirrors the original AICerts course pages: Poppins type,
 * teal gradient accents, rounded cards, soft shadows, accordion modules.
 */

.g4l-course {
	--g4l-teal-1: #3ec9d6;
	--g4l-teal-2: #257a9e;
	--g4l-ink: #1f2d3d;
	--g4l-muted: #5b6b7b;
	--g4l-line: #e6eef2;
	--g4l-bg: #f7fafb;
	--g4l-radius: 14px;
	--g4l-shadow: 0 4px 18px rgba(20, 40, 60, 0.08);

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--g4l-ink);
	line-height: 1.65;
	font-size: 16px;
}

.g4l-course * {
	box-sizing: border-box;
}

/* Sections */
.g4l-section {
	margin: 0 0 36px;
}
.g4l-section:last-child {
	margin-bottom: 0;
}
.g4l-h {
	font-size: 22px;
	font-weight: 700;
	color: var(--g4l-ink);
	margin: 0 0 18px;
	padding-bottom: 10px;
	position: relative;
}
.g4l-h::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--g4l-teal-1), var(--g4l-teal-2));
}

/* Generic list/text inside imported HTML */
.g4l-course p {
	color: var(--g4l-muted);
	margin: 0 0 12px;
}
.g4l-course ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.g4l-course .g4l-section > ul > li {
	position: relative;
	padding: 6px 0 6px 30px;
	color: var(--g4l-muted);
}
.g4l-course .g4l-section > ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 14px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--g4l-teal-1), var(--g4l-teal-2));
}
.g4l-course strong {
	color: var(--g4l-ink);
}

/* Card grids (overview, why-it-matters) */
.g4l-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.g4l-card {
	background: #fff;
	border: 1px solid var(--g4l-line);
	border-radius: var(--g4l-radius);
	padding: 18px 20px;
	box-shadow: var(--g4l-shadow);
}
.g4l-card h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--g4l-teal-2);
}
.g4l-card div,
.g4l-card p {
	font-size: 14px;
	color: var(--g4l-muted);
	margin: 0;
}

/* Modules accordion (native <details>) */
.g4l-modules {
	background: #fff;
	border: 1px solid var(--g4l-line);
	border-radius: var(--g4l-radius);
	box-shadow: var(--g4l-shadow);
	overflow: hidden;
}
.g4l-module {
	border-bottom: 1px solid var(--g4l-line);
}
.g4l-module:last-child {
	border-bottom: none;
}
.g4l-module > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--g4l-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: background 0.15s ease;
}
.g4l-module > summary::-webkit-details-marker {
	display: none;
}
.g4l-module > summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--g4l-teal-1), var(--g4l-teal-2));
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
	transition: transform 0.2s ease;
}
.g4l-module[open] > summary::after {
	transform: rotate(45deg);
}
.g4l-module > summary:hover {
	background: var(--g4l-bg);
}
.g4l-module-body {
	padding: 0 20px 18px;
	color: var(--g4l-muted);
	font-size: 15px;
}

/* Who should enroll */
.g4l-enroll {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.g4l-enroll-item {
	background: var(--g4l-bg);
	border-left: 4px solid var(--g4l-teal-1);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 14px;
	color: var(--g4l-muted);
}
.g4l-enroll-item p {
	margin: 0;
}

/* AI tools chips */
.g4l-tools-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.g4l-tool {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--g4l-line);
	border-radius: 999px;
	padding: 8px 16px 8px 10px;
	box-shadow: var(--g4l-shadow);
	font-size: 14px;
	font-weight: 600;
	color: var(--g4l-ink);
}
.g4l-tool img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.g4l-h { font-size: 19px; }
	.g4l-course { font-size: 15px; }
	.woocommerce div.product .product_title.entry-title { font-size: 26px !important; }
	.woocommerce div.product p.price,
	.woocommerce div.product .summary .price { font-size: 24px !important; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: wrap; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 18px !important; }
	.woocommerce div.product .woocommerce-tabs .panel { padding: 22px 18px !important; }
}

/* ============================================================
   Single product image gallery — white background so the
   rounded corners match the white page (no black edges) and
   no zoom-on-hover.
   ============================================================ */
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	background: #fff !important;
	background-color: #fff !important;
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #eef2f5;
}
.woocommerce-product-gallery__image img {
	border-radius: 14px;
	display: block;
}
/* No zoom magnification layer on hover */
.woocommerce-product-gallery .zoomImg { display: none !important; }

/* Frame the featured image so the certificate badges (which have a white
   top half) read as intentional rather than floating on the page. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	background: #f7fafb !important;
	border: 1px solid #e6eef2;
	border-radius: 16px;
	overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
}

/* Keep the blue gradient dots, drop the theme's default grey disc/decimal
   markers on the imported bullet lists. */
.g4l-course ul li {
	list-style: none !important;
}

/* ============================================================
   Modern product summary (title, price, add-to-cart, meta).
   Scoped to .woocommerce div.product so it never leaks out.
   ============================================================ */
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product .entry-summary {
	padding-left: 6px;
}
.woocommerce div.product .product_title.entry-title {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 34px !important;
	line-height: 1.15 !important;
	color: #1f2d3d !important;
	margin: 0 0 12px !important;
}
/* Subtitle / tagline under the title (manual G4L courses). */
.woocommerce div.product .summary .g4l-course-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: #5b6b7b;
	margin: -4px 0 16px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product .summary .price {
	color: #257a9e !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	margin: 0 0 16px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: #5b6b7b;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 22px;
}
.woocommerce div.product form.cart {
	margin-bottom: 24px;
}
.woocommerce div.product .single_add_to_cart_button.button.alt {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	padding: 15px 40px !important;
	border-radius: 999px !important;
	letter-spacing: 0.2px;
}
.woocommerce div.product .product_meta {
	border-top: 1px solid #e6eef2;
	padding-top: 16px;
	font-size: 13px;
	color: #5b6b7b;
}
.woocommerce div.product .product_meta a {
	color: #257a9e;
}

/* ============================================================
   Modern description/reviews tabs.
   ============================================================ */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	gap: 6px;
	background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
	display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
	display: none !important;
	border: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	color: #5b6b7b !important;
	padding: 14px 26px !important;
	display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fff !important;
	box-shadow: 0 -2px 0 #3ec9d6 inset;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #257a9e !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
	background: transparent;
	border: 0 !important;
	border-radius: 0;
	padding: 26px 4px 4px !important;
	margin: 0 !important;
	box-shadow: none !important;
}
/* WooCommerce injects a redundant "Description" <h2> at the top of the panel;
   our content already has section headings, so hide it accessibly. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}