/**
 * Course Bundle Frontend Polish — KP
 *
 * 100% Astra-adaptive: uses --ast-global-color-* CSS variables.
 * No hardcoded brand colors so each subsite (Mariana, Kursopro, instructors)
 * inherits its configured palette.
 */

:root {
	--kp-bundle-brand: var(--ast-global-color-0, #66c6c2);
	--kp-bundle-dark: var(--ast-global-color-2, #0d2134);
	--kp-bundle-soft: color-mix(in srgb, var(--kp-bundle-brand) 12%, transparent);
}

/* =========================================================
   #0 — Hide "Instructores" block on Pack frontend (v1.3.7g)
   Tutor → Diseño → Autor toggle is OFF, but the bundle template
   has its own hardcoded include of bundle-authors.php that ignores
   the toggle. We hide the wrapper at CSS level — safer than editing
   the LMS core template.
========================================================= */
body.single-course-bundle .tutor-bundle-author-list {
	display: none !important;
}

/* =========================================================
   #8 — Hide duplicate discount ribbon on /cursos archive
   The bundle card inside the courses listing was rendering
   two ribbons stacked. Keep only the first one.
========================================================= */
.tutor-courses .tutor-course-list-item .tutor-ribbon ~ .tutor-ribbon,
.tutor-courses [class*="course-bundle"] .tutor-ribbon ~ .tutor-ribbon,
.tutor-course-list-item .kp-bundle-ribbon ~ .kp-bundle-ribbon,
.tutor-course-list-item [class*="ribbon"]:nth-of-type(n+2) {
	display: none !important;
}

/* =========================================================
   #9 + #10 — Unified ribbon styling (% and $)
   Replaces the basic red square with a clean adaptive label.
========================================================= */
.tutor-ribbon,
.tutor-bundle-ribbon,
.kp-bundle-ribbon,
[class*="course-bundle"] .tutor-ribbon,
.single-course-bundle .tutor-ribbon {
	background: var(--kp-bundle-dark) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: .3px !important;
	padding: 6px 12px 6px 14px !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.tutor-ribbon::before,
.kp-bundle-ribbon::before {
	content: "" !important;
	display: none !important;
}

/* =========================================================
   #7 — Course cards inside bundle: PRO look
========================================================= */
.single-course-bundle .tutor-bundle-courses-list,
.single-course-bundle [class*="bundle-courses"],
.kp-bundle-courses-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 18px !important;
	margin-top: 12px !important;
}

.single-course-bundle .tutor-bundle-courses-list .tutor-course-row,
.single-course-bundle [class*="bundle-courses"] .tutor-course-row,
.kp-bundle-courses-grid .kp-bundle-course-card {
	border: 1px solid color-mix(in srgb, var(--kp-bundle-dark) 10%, transparent) !important;
	border-radius: 10px !important;
	padding: 14px !important;
	background: #fff !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.single-course-bundle .tutor-bundle-courses-list .tutor-course-row:hover,
.kp-bundle-courses-grid .kp-bundle-course-card:hover {
	transform: translateY(-2px) !important;
	border-color: var(--kp-bundle-brand) !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

.single-course-bundle .tutor-bundle-courses-list img,
.kp-bundle-courses-grid img {
	width: 100% !important;
	aspect-ratio: 16/9 !important;
	object-fit: cover !important;
	border-radius: 8px !important;
}

/* Hide "Categoría: Sin categorizar" rows inside bundle course cards */
.single-course-bundle .tutor-bundle-courses-list [class*="categor"],
.single-course-bundle .tutor-bundle-courses-list .tutor-meta-categor,
.kp-bundle-courses-grid .kp-bundle-course-card .kp-course-category {
	display: none !important;
}

/* =========================================================
   Bundle thumbnail polish (single bundle page)
========================================================= */
.single-course-bundle .tutor-course-thumbnail,
.single-course-bundle .kp-bundle-thumbnail-wrap {
	aspect-ratio: 16/9 !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}
.single-course-bundle .tutor-course-thumbnail img,
.single-course-bundle img.kp-bundle-thumbnail {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* =========================================================
   #4 — "Mostrar más" / "Mostrar menos" — visible state
========================================================= */
.kp-bundle-show-more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: var(--kp-bundle-brand) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	background: transparent !important;
	border: 0 !important;
	padding: 6px 0 !important;
	font-size: 14px !important;
}
.kp-bundle-show-more:hover {
	color: var(--kp-bundle-dark) !important;
}

.single-course-bundle .kp-collapsed {
	max-height: 7.5em;
	overflow: hidden;
	position: relative;
}
.single-course-bundle .kp-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3em;
	background: linear-gradient(transparent, #fff);
	pointer-events: none;
}

/* ================================================================
   v1.3.7e — Pack course cards: bigger on desktop, prettier on mobile,
   author line aligned consistently across all cards.
================================================================ */

/* Wrapper grid: bigger gap, centered cards */
body.single-course-bundle .tutor-bundle-courses-wrapper {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
	margin-top: 24px !important;
	list-style: none !important;
	padding: 0 !important;
}

/* Each card: bigger, more breathing room, equal height (flex column) */
body.single-course-bundle .tutor-bundle-course-list-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 20px !important;
	padding: 24px !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 2px 8px rgba(12, 33, 52, 0.04) !important;
	transition: box-shadow .2s ease, transform .2s ease !important;
	min-height: 180px !important;
}

body.single-course-bundle .tutor-bundle-course-list-wrapper:hover {
	box-shadow: 0 4px 16px rgba(12, 33, 52, 0.08) !important;
	transform: translateY(-2px) !important;
}

/* Thumbnail: bigger, square-ish, fixed width */
body.single-course-bundle .tutor-bundle-course-list-counter {
	flex: 0 0 160px !important;
	max-width: 160px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.single-course-bundle .tutor-bundle-course-list-counter .tutor-bundle-feature-image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	border-radius: 8px !important;
}

body.single-course-bundle .tutor-bundle-course-list-counter img {
	width: 100% !important;
	height: 100% !important;
	min-height: 130px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	display: block !important;
}

/* Description column: takes remaining space.
   v1.3.7f: justify-content changed to flex-start so the title always sits at
   the top, and the "Por [autor]" line is anchored to the bottom via
   margin-top:auto on the <p>. This makes the author line align across cards
   regardless of title length (1, 2, or 3 lines). */
body.single-course-bundle .tutor-bundle-course-list-desc {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-self: stretch !important;
	gap: 8px !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Course title: bigger, equal heights via line-clamp */
body.single-course-bundle .tutor-bundle-course-title {
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	margin: 0 0 4px 0 !important;
	color: #0C2134 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	-webkit-hyphens: none !important;
	hyphens: none !important;
}

/* Author line: anchored to bottom of the card via margin-top:auto so
   "Por [autor]" sits at the same vertical position across all cards in the
   row, regardless of how many lines the title takes (1, 2 or 3). */
body.single-course-bundle .tutor-bundle-course-list-desc p {
	margin: auto 0 0 0 !important;
	font-size: 14px !important;
	color: #5a6878 !important;
	line-height: 1.4 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

body.single-course-bundle .tutor-bundle-course-list-desc p a {
	color: #0C2134 !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

body.single-course-bundle .tutor-bundle-course-list-desc p a:hover {
	color: var(--ast-global-color-0, #65BFB6) !important;
	text-decoration: underline !important;
}

/* ===== MOBILE (≤ 768px): cards stack vertically, prettier ===== */
@media (max-width: 768px) {
	body.single-course-bundle .tutor-bundle-courses-wrapper {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	body.single-course-bundle .tutor-bundle-course-list-wrapper {
		flex-direction: column !important;
		padding: 16px !important;
		gap: 14px !important;
		min-height: 0 !important;
	}

	body.single-course-bundle .tutor-bundle-course-list-counter {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.single-course-bundle .tutor-bundle-course-list-counter img {
		width: 100% !important;
		height: 200px !important;
		min-height: 200px !important;
		max-height: 220px !important;
	}

	body.single-course-bundle .tutor-bundle-course-title {
		font-size: 17px !important;
		-webkit-line-clamp: 2 !important;
	}

	body.single-course-bundle .tutor-bundle-course-list-desc {
		gap: 6px !important;
	}
}

/* =========================================================
   v1.4.16 — Bundle "PAQUETE DE CURSOS" badge polish.
   Replaces the ugly hardcoded purple (#9342e7) with an
   Astra-adaptive design (each subsite uses its own brand
   color via --ast-global-color-2). Smaller, lighter,
   square (no border-radius) per Kursopro brand system.
========================================================= */
.tutor-bundle-course-count-badge,
.tutor-checkout-course-bundle-badge {
	background: linear-gradient(
		135deg,
		var(--ast-global-color-2, #0C2134) 0%,
		color-mix(in srgb, var(--ast-global-color-2, #0C2134) 85%, #000) 100%
	) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 10px !important;
	letter-spacing: .4px !important;
	padding: 4px 10px !important;
	border-radius: 3px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
	margin-top: 6px !important;
	margin-bottom: 6px !important;
	max-width: max-content !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.tutor-bundle-course-count-badge .tutor-bundle-course-count-text {
	text-transform: uppercase !important;
	font-size: 9px !important;
	letter-spacing: .6px !important;
	font-weight: 700 !important;
}

/* Stack icon + count tighter */
.tutor-bundle-course-count-badge i,
.tutor-bundle-course-count-badge svg {
	font-size: 11px !important;
	width: 11px !important;
	height: 11px !important;
	opacity: .9 !important;
}

/* Course list backend purple meta line — match brand */
.tutor-bundle-list-meta {
	color: var(--ast-global-color-2, #0C2134) !important;
	font-weight: 500 !important;
}

/* ============================================================
 * Badge "-X%" descuento dinamico — KP-FIX 2026-05-07
 * Se inyecta sobre la thumbnail de cada card course/bundle.
 * Antes vivia en mu-plugin externo (parche); ahora es nativo
 * del plugin para todos los sitios.
 * ============================================================ */
.tutor-course-thumbnail { position: relative; }

.kp-badge-dto {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--tutor-primary-color, var(--ast-global-color-0, #0C2134));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 4px;
	z-index: 10;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   v1.7.2 KP-FIX 2026-05-08 — Bundle = looks like single course
   Astra applies "ast-separate-container" layout to bundles
   (boxed grey container) but "ast-page-builder-template" to
   regular courses (transparent, no box). Override ONLY the
   background + box-shadow to make bundle look identical.
   DO NOT touch padding, margin, or border-radius — those
   provide the spacing we want to keep.
========================================================= */

/* Outer container: transparent like courses */
body.single-course-bundle.ast-separate-container .site-content,
body.single-course-bundle.ast-separate-container .ast-article-single {
	background: transparent !important;
	box-shadow: none !important;
}

/* Sidebar card: no box, no shadow, no grey background */
body.single-course-bundle .tutor-sidebar-card {
	box-shadow: none !important;
	border: none !important;
}

body.single-course-bundle .tutor-sidebar-card .tutor-card-body {
	background-color: transparent !important;
}

/* Hide "X% de descuento" info row from sidebar pricing card */
body.single-course-bundle .tutor-card-body .tutor-d-flex.tutor-align-center.tutor-gap-1 {
	display: none !important;
}

/* KP-FIX 2026-05-09 v3.6.0:
   Bundle cards have <del>old</del>+<ins>new</ins> price + button competing
   for the same horizontal space, making the price look smaller. Solution:
   keep price IDENTICAL to regular cards, and shrink the bundle button
   text/padding so price has room without being compressed.
   Scope: ONLY .tutor-course-list (archive listings). */

/* KP-FIX 2026-05-10 v3.6.5: force bundle price (ins) to same size as
   regular course price (1rem bold). Without this the inherited size from
   the parent .price gets visually compressed because two children compete
   for space. */
.tutor-course-list .list-item-price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.tutor-course-list .list-item-price .price ins,
.tutor-course-list .list-item-price .price ins .woocommerce-Price-amount,
.tutor-course-list .list-item-price .price ins .woocommerce-Price-currencySymbol,
.tutor-course-list .list-item-price .price ins bdi {
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: inherit;
	line-height: 1.2;
}

.tutor-course-list .list-item-price .price del,
.tutor-course-list .list-item-price .price del .woocommerce-Price-amount,
.tutor-course-list .list-item-price .price del .woocommerce-Price-currencySymbol,
.tutor-course-list .list-item-price .price del bdi {
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	opacity: 0.7;
	color: inherit;
	line-height: 1.2;
}

/* Shrink bundle button text/padding so it fits next to the price without
   pushing it down or compressing its font-size. Applies to BOTH:
   - "Comprar este Pack" (bundle cart button)
   - "Ver Carrito" (when bundle already in cart) */
.tutor-course-list .tutor-card-footer .list-item-button .tutor-btn,
.tutor-course-list .tutor-card-footer .list-item-button .add_to_cart_button {
	padding: 6px 10px !important;
	font-size: 0.8rem !important;
	white-space: nowrap;
}

.tutor-course-list .tutor-card-footer .list-item-button .tutor-icon-cart-line {
	font-size: 0.85rem !important;
	margin-right: 4px !important;
}

/* Footer flex row alignment — keep price + button on same line baseline */
.tutor-course-list .tutor-card-footer .tutor-d-flex.tutor-justify-between {
	align-items: center !important;
	gap: 8px;
}