/*
 * Reusable Component: Document Card
 *
 * Built to the exact Figma Auto Layout measurements supplied
 * (287x448px card, 18px padding, 16px gap between every child, 251px
 * content width, 251x171px image frame, etc.) — not approximated.
 * Fixed sizing applies at desktop/tablet widths; a mobile override
 * below relaxes it to responsive sizing specifically to satisfy the
 * separate, standing "no horizontal overflow at any breakpoint"
 * requirement for this project (287px card plus mobile page padding
 * would not always fit inside a 320px viewport) — the spec itself
 * scopes the fixed sizing to "the desktop Figma card".
 */

.qehs-document-card {
	box-sizing: border-box;
	width: 287px;
	min-height: 448px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background-color: #FFFFFF;
	border: 1px solid #D0D0D0;
	border-radius: 16px;
}

/* --- Top row: Best Seller badge + wishlist heart --- */

.qehs-document-card__top {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.qehs-document-card__badge {
	display: inline-flex;
	padding: 4px 12px;
	border-radius: 999px;
	/* Pale-yellow bg (existing --qehs-warning-tint token, exact match
	   to the reference) + amber text (locally scoped literal — no
	   existing token is an exact match; not a new sitewide color). */
	background-color: var(--qehs-warning-tint);
	color: #D99A1B;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.qehs-document-card__wishlist {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* Locally scoped literal, precisely sampled from the reference —
	   noticeably different from the existing --qehs-error token. */
	color: #B63831;
	/* The heart is now a <button> (wishlist toggle). The global reset
	   already removes background/border; also remove the UA padding so
	   the 40x40 box and icon position are identical to the old <span>. */
	padding: 0;
	cursor: pointer;
}

.qehs-document-card__wishlist:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 50%;
}

.qehs-document-card__wishlist[aria-busy="true"] {
	cursor: progress;
}

/* Active (in wishlist): same heart, same red, filled. */
.qehs-document-card__wishlist--active svg path {
	fill: currentColor;
}

/* --- Image frame: fixed 251x171, per spec — never determined by the
   cover image's own intrinsic size. --- */

.qehs-document-card__media {
	flex-shrink: 0;
	width: 251px;
	height: 171px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E8E8E8;
	border-radius: 16px;
	overflow: hidden;
}

.qehs-document-card__image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.qehs-document-card__media img {
	display: block;
	width: auto;
	height: 155px;
	max-width: 203px;
	/* Belt-and-suspenders: height/max-width above already constrain
	   the box the spec calls for, and object-fit: contain guarantees
	   the complete cover is preserved (never cropped/stretched) even
	   if a given image's own proportions differ from the 203x155
	   allowance. */
	object-fit: contain;
}

/* --- Title --- */

.qehs-document-card__title {
	flex-shrink: 0;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.qehs-document-card__title a {
	color: #000000;
}

.qehs-document-card__title a:hover,
.qehs-document-card__title a:focus-visible {
	color: var(--qehs-primary);
}

/* --- Rating (dynamic — see document-card.php; not rendered at all
   when a product has zero real reviews, never fabricated) --- */

.qehs-document-card__rating {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.qehs-document-card__stars {
	display: inline-flex;
	gap: 1px;
}

.qehs-document-card__star {
	fill: var(--qehs-border);
}

.qehs-document-card__star.is-filled {
	fill: #F5BE48;
}

.qehs-document-card__rating-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-document-card__review-count {
	font-size: 20px;
	color: var(--qehs-text-muted);
}

/* --- Price --- */

.qehs-document-card__price {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 24px;
	/* Exact match to the existing --qehs-success token (#5E9128) —
	   confirmed identical to the reference's requested green, so this
	   reuses the token rather than a new literal. */
	color: var(--qehs-success);
}

.qehs-document-card__price .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--qehs-success);
}

/* --- Add to Cart: fixed 145x48, NOT full card width, per spec --- */

.qehs-document-card__cta {
	flex-shrink: 0;
	align-self: flex-start;
	width: 145px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: var(--qehs-radius-md);
	/* Overrides .qehs-btn--secondary's background for this card only.
	   Exact match to --qehs-success — see the price comment above. */
	background-color: var(--qehs-success) !important;
	border-color: var(--qehs-success) !important;
	color: #ffffff !important;
}

.qehs-document-card__cta-icon,
.qehs-document-card__cta-icon path {
	color: #ffffff !important;
}

/* Zero space/gap when empty (default state) - only takes up room once
   JS adds .is-visible after a real success/error response. Preserves
   the approved card's exact appearance when no message is showing. */
.qehs-document-card__message {
	display: none;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
}

.qehs-document-card__message.is-visible {
	display: block;
}

.qehs-document-card__message.is-success {
	color: var(--qehs-success);
}

.qehs-document-card__message.is-error {
	color: var(--qehs-error);
}

/* WooCommerce's own wc-add-to-cart.js already adds .loading to the
   button during an AJAX request (this is WooCommerce's built-in
   duplicate-submission guard, not something added here) — this gives
   it a visible treatment regardless of whether WooCommerce's own
   icon-font spinner asset is loaded. */
.qehs-document-card__cta.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* --- Mobile: relax the fixed desktop sizing so the card scales down
   rather than overflowing a narrow viewport — the spec's fixed
   287x448px sizing is explicitly scoped to "the desktop Figma card". --- */
@media (max-width: 480px) {
	.qehs-document-card {
		width: 100%;
		min-height: 0;
	}

	.qehs-document-card__media {
		width: 100%;
	}
}