/**
 * Course sales (single product) page.
 * Enqueued only on single product pages (see sales-page-hooks.php).
 */

:root {
	--sales-accent: #2f6b3c;
	--sales-accent-dark: #234f2c;
	--sales-accent-light: #dcebd6;
	--sales-star: #f0a500;
	--sales-ink: #1f2933;
	--sales-ink-muted: #5b6672;
	--sales-border: #e3e7ea;
	--sales-surface: #ffffff;
	--sales-surface-muted: #f5f7f5;
	--sales-radius: 12px;
	--sales-radius-sm: 6px;
}

.course-sales-page {
	max-width: 1100px;
	margin: 0 auto;
}

/* ---------- Banner ---------- */

.course-sales__banner {
	background: var(--sales-accent-dark);
	background: linear-gradient(135deg, var(--sales-accent-dark), var(--sales-accent));
	border-radius: var(--sales-radius);
	padding: 36px 40px;
	margin-bottom: 32px;
}

.course-sales__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 28px;
	line-height: 1.3;
}

.course-sales__tagline {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	max-width: 100%;
}
.course-sales__tagline p {
	color: rgba(255, 255, 255, 0.9);
}

.course-sales__stats {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
}

/* ---------- Body layout ---------- */

.course-sales__body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.course-sales__body {
		grid-template-columns: 1fr;
	}
}

.course-sales__main {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.course-sales__section {
	background: var(--sales-surface);
	border: 1px solid var(--sales-border);
	border-radius: var(--sales-radius);
	padding: 24px 28px;
}

.course-sales__section h2 {
	margin: 0 0 16px;
	font-size: 20px;
	color: var(--sales-ink);
}

/* ---------- What you'll learn ---------- */

.course-sales__outcomes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.course-sales__outcomes li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--sales-ink);
	font-size: 15px;
	line-height: 1.4;
}

.course-sales__check {
	flex: 0 0 auto;
	color: var(--sales-accent);
	font-weight: 700;
}

/* ---------- What's covered ---------- */

.course-sales__outline {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: course-outline;
	border-top: 1px solid var(--sales-border);
}

.course-sales__outline li {
	counter-increment: course-outline;
	padding: 12px 0;
	border-bottom: 1px solid var(--sales-border);
	color: var(--sales-ink);
	font-size: 15px;
}

.course-sales__outline li::before {
	content: counter(course-outline) '. ';
	font-weight: 700;
	color: var(--sales-accent-dark);
}

.course-sales__outline-note {
	margin: 16px 0 0;
	color: var(--sales-ink-muted);
	font-size: 13px;
}

/* ---------- Certificate showcase ----------
 * Called out with a gold border (rather than the neutral card border every
 * other section uses) since this is a trust/conversion signal worth making
 * visually distinct, per the sales-page mockup. */

.course-sales__certificate {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	border-color: #e8c547;
	border-width: 2px;
}

.course-sales__certificate-image {
	flex: 0 0 auto;
	width: 220px;
	height: auto;
	border: 1px solid var(--sales-border);
	border-radius: var(--sales-radius-sm);
}

.course-sales__certificate-arrow {
	flex: 0 0 auto;
	width: 56px;
	height: 40px;
	color: var(--sales-ink-muted);
}

@media (max-width: 640px) {
	.course-sales__certificate {
		flex-direction: column;
		align-items: flex-start;
	}

	.course-sales__certificate-arrow {
		display: none;
	}

	.course-sales__certificate-image {
		width: 100%;
		max-width: 320px;
	}
}

.course-sales__certificate-icon {
	display: inline-flex;
	color: var(--sales-ink-muted);
	margin-bottom: 6px;
}

.course-sales__certificate-icon svg {
	width: 28px;
	height: 28px;
}

.course-sales__certificate-text h2 {
	margin: 0 0 6px;
}

.course-sales__certificate-pass-mark {
	margin: 0 0 4px;
	font-weight: 700;
	color: var(--sales-accent-dark);
}

.course-sales__certificate-note {
	margin: 0;
	color: var(--sales-ink-muted);
	font-size: 14px;
}

/* ---------- Testimonials ---------- */

.course-sales__testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.course-sales__testimonial {
	margin: 0;
	padding: 16px;
	background: var(--sales-surface-muted);
	border-radius: var(--sales-radius-sm);
}

.course-sales__testimonial-stars {
	display: block;
	color: var(--sales-star);
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.course-sales__testimonial p {
	margin: 0 0 8px;
	color: var(--sales-ink);
	font-size: 14px;
	line-height: 1.5;
}

.course-sales__testimonial footer {
	color: var(--sales-ink-muted);
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Testimonials slider (more than 2) ---------- */

.course-sales__testimonials-wrap--slider {
	position: relative;
}

.course-sales__testimonials-wrap--slider .course-sales__testimonials {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.course-sales__testimonials-wrap--slider .course-sales__testimonials::-webkit-scrollbar {
	display: none;
}

.course-sales__testimonials-wrap--slider .course-sales__testimonial {
	flex: 0 0 calc(50% - 8px);
	scroll-snap-align: start;
}

@media (max-width: 700px) {
	.course-sales__testimonials-wrap--slider .course-sales__testimonial {
		flex: 0 0 85%;
	}
}

.course-sales__testimonials-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

.course-sales__testimonials-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sales-border);
	border-radius: 50%;
	background: var(--sales-surface);
	color: var(--sales-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.course-sales__testimonials-arrow:hover,
.course-sales__testimonials-arrow:focus-visible {
	background: var(--sales-accent-light);
	border-color: var(--sales-accent);
}

.course-sales__testimonials-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------- FAQ accordion ---------- */

.course-sales__faq-item {
	border-bottom: 1px solid var(--sales-border);
}

.course-sales__faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0 !important;
	background: var(--sales-surface) !important;
	background-image: none !important;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--sales-ink) !important;
	cursor: pointer;
}

.course-sales__faq-question:hover,
.course-sales__faq-question:focus,
.course-sales__faq-question[aria-expanded="true"] {
	background: var(--sales-surface) !important;
	background-image: none !important;
	color: var(--sales-accent-dark) !important;
}

.course-sales__faq-question[aria-expanded="true"] .course-sales__faq-icon,
.course-sales__faq-question:hover .course-sales__faq-icon,
.course-sales__faq-question:focus .course-sales__faq-icon {
	color: var(--sales-accent-dark);
}

.course-sales__faq-question:focus-visible {
	outline: 2px solid var(--sales-accent);
	outline-offset: 2px;
}

.course-sales__faq-icon {
	color: var(--sales-accent);
	transition: transform 0.15s ease;
}

.course-sales__faq-question[aria-expanded="true"] .course-sales__faq-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.course-sales__faq-icon {
		transition: none;
	}
}

.course-sales__faq-answer {
	padding: 0 0 16px;
	color: var(--sales-ink-muted);
	font-size: 14px;
	line-height: 1.6;
	
}
.course-sales__faq-answer p {
    font-size: 14px;
}

.course-sales__faq-answer p:first-child {
	margin-top: 0;
}

.course-sales__faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---------- Students also bought (WooCommerce upsells) ----------
 * Mirrors the Courses List page's .course-card grid (assets/css/courses.css):
 * same card chrome, 16:9 image, and — since these are two separate <a> tags
 * in WooCommerce's own loop template rather than a single footer wrapper —
 * the same "pin the button to the bottom" trick, done here via the grid's
 * default row-stretch (equal card height per row) plus margin-top: auto on
 * the button, so Add to Cart lines up across a row regardless of how many
 * lines each title wraps to. */

.course-sales__main .up-sells.upsells {
	background: transparent;
	border: 0;
	padding: 0;
}

.course-sales__main .up-sells.upsells h2 {
	margin: 0 0 16px;
	font-size: 20px;
	color: var(--sales-ink);
}

.course-sales__main .up-sells.upsells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* Without this, Grid's default stretch forces every card in a row to
	 * match the tallest one's height, and the button below (margin-top:
	 * auto) fills whatever leftover space that created — a large dead gap
	 * above the price on any card with a shorter title. Cards size to their
	 * own content instead; the JS equalizer (product-page.js) still keeps
	 * title/price start positions aligned across a row without a full-card
	 * stretch. */
	align-items: start;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.course-sales__main .up-sells.upsells ul.products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--sales-surface);
	border: 1px solid var(--sales-border);
	border-radius: var(--sales-radius);
	overflow: hidden;
	text-align: left;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.course-sales__main .up-sells.upsells ul.products li.product:hover {
	box-shadow: 0 4px 8px rgba(31, 41, 51, 0.08), 0 16px 32px rgba(31, 41, 51, 0.1);
	transform: translateY(-2px);
}

.course-sales__main .up-sells.upsells ul.products li.product > a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.course-sales__main .up-sells.upsells ul.products li.product img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin: 0 0 14px;
}

.course-sales__main .up-sells.upsells ul.products li.product .woocommerce-loop-product__title {
	margin: 0 16px 6px;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sales-accent);
}

.course-sales__main .up-sells.upsells ul.products li.product .price {
	display: block;
	margin: 0 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--sales-ink);
}

.course-sales__main .up-sells.upsells ul.products li.product a.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 16px !important;
	text-align: center;
}

/* ---------- Sidebar / buy box ---------- */

/* top offset clears the theme's fixed site header (.nav-wrap, ~81px tall —
   see its own mobile dropdown offset in developer.css) plus a small gap, so
   the sticky buy box settles in below the header instead of scrolling up
   underneath it. */
.course-sales__sidebar {
	position: sticky;
	top: 120px;
}

.course-sales__buybox {
	background: var(--sales-surface);
	border: 1px solid var(--sales-accent);
	border-radius: var(--sales-radius);
	padding: 20px;
}

.course-sales__preview {
	margin-bottom: 16px;
}

.course-sales__preview-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: 16 / 9;
	/* !important: something else on the page sets background-image as a
	 * separate longhand declaration, which can win over this background
	 * shorthand regardless of selector specificity since CSS cascades
	 * per-property, not per-rule. */
	background: var(--sales-accent-light) !important;
	background-image: none !important;
	border: 0;
	border-radius: var(--sales-radius-sm);
	color: var(--sales-accent-dark) !important;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.course-sales__preview-trigger:hover,
.course-sales__preview-trigger:focus,
.course-sales__preview-trigger:focus-visible,
.course-sales__preview-trigger:active {
	background: #cfe4c9 !important;
	background-image: none !important;
	color: var(--sales-accent-dark) !important;
}

/* ---------- Preview video popup ----------
 * Same modal pattern/markup as the Courses List page's .course-preview-modal
 * (built by the matching IIFE in product-page.js), styled here with this
 * page's own --sales-* tokens since courses.css isn't loaded on product
 * pages. */

.course-preview-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 24, 20, 0.75);
}

.course-preview-modal[hidden] {
	display: none;
}

.course-preview-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 860px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--sales-radius);
	overflow: hidden;
}

.course-preview-modal__dialog iframe,
.course-preview-modal__dialog video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.course-preview-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(20, 24, 20, 0.65);
	color: #fff;
	border: 0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.course-preview-modal__close:hover {
	background: rgba(20, 24, 20, 0.85);
}

.course-preview-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.course-sales__price {
	font-size: 28px;
	font-weight: 800;
	color: var(--sales-ink);
	margin-bottom: 12px;
}

.course-sales__price del {
	font-size: 16px;
	font-weight: 400;
	opacity: 0.55;
	margin-right: 6px;
}

/* Targets WooCommerce's own add-to-cart form/button so the reused core
   markup matches this page's design without hand-building the form. */
.course-sales__buybox form.cart {
	margin-bottom: 16px;
}

.course-sales__buybox .single_add_to_cart_button,
.course-sales__buybox .single_add_to_cart_button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--sales-accent);
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	border: 0;
}

.course-sales__buybox .single_add_to_cart_button:hover,
.course-sales__buybox .single_add_to_cart_button:focus-visible {
	background: var(--sales-accent-dark);
}

.course-sales__buybox .quantity {
	display: none;
}

.course-sales__buybox-facts {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.course-sales__buybox-facts li {
	font-size: 13px;
	color: var(--sales-ink-muted);
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.course-sales__buybox-facts li span {
	color: var(--sales-accent);
	font-weight: 700;
}

.course-sales__buybox-fact--highlight {
	color: var(--sales-accent-dark);
	font-weight: 700;
}

.course-sales__buybox-fact--highlight span {
	color: var(--sales-accent-dark);
}

/* ---------- Guarantee card (below the buy box) ---------- */

.course-sales__guarantee {
	display: flex;
	gap: 14px;
	margin: 20px 0;
	padding: 20px !important;
	background: var(--sales-surface);
	border: 1.5px solid var(--sales-accent-light);
	border-radius: var(--sales-radius);
	box-shadow: 0 1px 3px rgba(31, 41, 51, 0.08);
}
.wp-block-woocommerce-checkout-order-summary-block .course-sales__guarantee {
	margin: 20px;
	padding: 20px !important;
}

.course-sales__guarantee-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sales-accent-light);
	color: var(--sales-accent-dark);
	font-size: 18px;
	line-height: 1;
}

.course-sales__guarantee-body {
	flex: 1 1 auto;
	min-width: 0;
}

.course-sales__guarantee-title {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--sales-ink);
}

.course-sales__guarantee-description {
	margin: 0 0 10px;
	color: var(--sales-ink-muted);
	font-size: 13px;
	line-height: 1.5;
}

.course-sales__guarantee-link {
	display: block;
	color: var(--sales-accent-dark);
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
}

.course-sales__guarantee-link:hover,
.course-sales__guarantee-link:focus-visible {
	text-decoration: underline;
}

.course-sales__group-pricing {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: var(--sales-ink-muted);
}

.course-sales__group-pricing a {
	display: block;
	color: var(--sales-accent-dark);
	font-weight: 600;
	text-decoration: none;
}

.course-sales__group-pricing a:hover,
.course-sales__group-pricing a:focus-visible {
	text-decoration: underline;
}