/* ==========================================================================
   PET Recommendation Section — Wrapper & Grid Overrides
   Card styling comes from pc-courses.css (.pcc-card--modern).
   ========================================================================== */

/* --- Section wrapper --- */

.pet-rec-section {
	margin: 2.5rem auto;
}

.pet-rec-section__heading {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--pet-primary-dark, #061537);
	font-weight: var(--pet-heading-weight, 600);
	text-align: center;
}

/* --- Course Page: full-width break-out from two-column layout --- */

.pet-rec-course-page-wrap {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pet-border-color, rgba(26, 26, 46, 0.08));
}

/* --- Course page theme overrides (LearnDash / BuddyBoss specificity) --- */

.pet-rec-course-page-wrap .pcc-card--modern .entry-title {
	font-size: 1.0625rem;
	font-weight: var(--pet-heading-weight, 600);
	line-height: 1.35;
	margin: 0;
	letter-spacing: 0;
}

.pet-rec-course-page-wrap .pcc-card--modern .pcc-features li {
	margin-bottom: 0;
}

/* --- Cart upsells: unified cards inside .pet-checkout-section --- */

.pet-cart-upsells .pcc-grid {
	gap: 20px;
}

.pet-cart-upsells .pcc-card--modern .entry-title {
	font-size: 1rem;
	font-weight: var(--pet-heading-weight, 600);
	line-height: 1.3;
	margin: 0;
	letter-spacing: 0;
}

.pet-cart-upsells .pcc-card--modern .pcc-features li {
	margin-bottom: 0;
}

/* --- Loyalty discount note (conditional element) --- */

.pcc-loyalty-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	color: var(--pet-text-secondary, #2e3752);
}

.pet-rec-loyalty-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pet-info-light, #dbeafe);
	color: var(--pet-info, #3b82f6);
	cursor: pointer;
	font-size: 0.75rem;
}

/* --- LearnDash / BuddyBoss topic page overrides ---
   Prevents theme styles from bleeding into recommendation cards
   when [pet_recommendations] is placed inside a topic or lesson. */

.pet-rec-section .pcc-card--modern .pcc-features li,
.pet-rec-shortcode-wrap .pcc-card--modern .pcc-features li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	margin-bottom: 0;
}

.pet-rec-section .pcc-card--modern .pcc-features li::before,
.pet-rec-shortcode-wrap .pcc-card--modern .pcc-features li::before {
	display: none;
	content: none;
}

.pet-rec-section .pcc-card--modern .pcc-instructor,
.pet-rec-shortcode-wrap .pcc-card--modern .pcc-instructor {
	margin-bottom: 0;
}

/* --- Loyalty intro message --- */

.pet-rec-section__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 1.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--pet-text-secondary, #2e3752);
}

/* --- AJAX Add to Basket button states --- */

.pcc-card .pet-rec-add-to-cart.loading {
	opacity: 0.6;
	pointer-events: none;
}

.pcc-card .pet-rec-add-to-cart.added {
	background: var(--pet-success, #16a34a);
	border-color: var(--pet-success, #16a34a);
}

.pcc-card .pet-rec-add-to-cart.in-cart {
	background: var(--pet-surface-alt, #f9f7f3);
	border-color: var(--pet-border-color, rgba(26, 26, 46, 0.12));
	color: var(--pet-text-secondary, #6b6a7a);
	cursor: default;
	opacity: 1;
}

.pcc-card .pet-rec-add-to-cart.in-cart:hover {
	transform: none;
	box-shadow: none;
}

/* --- Book card in course recommendation grid --- */

.pcc-card--book .pcc-thumb img {
	object-fit: cover;
}

.pcc-card--book .pcc-book-subtitle {
	font-size: 0.8125rem;
	color: var(--pet-text-secondary, #2e3752);
	margin: 0.25rem 0 0;
	line-height: 1.4;
}

.pcc-card--book .pcc-book-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--pet-text-secondary, #2e3752);
}

.pcc-card--book .pcc-book-desc p {
	margin: 0;
}

.pcc-cta-row--book {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pcc-cta-row--book .pet-button {
	text-align: center;
	font-size: 0.8125rem;
	font-weight: var(--pet-font-semibold, 600);
}

/* Override base .pet-button background from pet-global.css */
.pcc-card--book .pet-button.pet-button--amazon {
	background: #FFB723;
	color: #415058;
	border-color: #FFB723;
	box-shadow: 0 10px 24px rgba(255, 183, 35, 0.18);
}

.pcc-card--book .pet-button.pet-button--amazon:hover {
	background: #e5a41f;
	border-color: #e5a41f;
	color: #415058;
}