/**
 * מכון נדב — כרטיס הערכה: גרסאות ותוספות.
 *
 * Banner variants (body.mn-cards-*), the buying flows (body.mn-flow-*) and
 * the "מה כוללת הערכה?" row. The base card lives in mn-product-card.css.
 */

/* ======================================================= banner variants */

/* --- א׳ dark: the black bar, carried into the card ----------------- */

body.mn-cards-a .elementor-wc-products .mn-card__art {
	border-bottom: 3px solid var( --mn-primary );
}

body.mn-cards-a .elementor-wc-products .mn-card__caption {
	color: #fff;
}

body.mn-cards-a .elementor-wc-products .mn-card__org {
	background: var( --mn-primary );
	color: var( --mn-on-primary );
}

/* --- ב׳ orange: the header's own colour --------------------------- */

body.mn-cards-b .elementor-wc-products .mn-card__gradient {
	background-image: linear-gradient( 135deg, #f2a64f 0%, #d97a1e 100% ) !important;
}

body.mn-cards-b .elementor-wc-products .mn-card__caption {
	color: #17202b;
	text-shadow: none;
}

body.mn-cards-b .elementor-wc-products .mn-card__org {
	background: rgba( 255, 255, 255, 0.95 );
	color: #17202b;
}

body.mn-cards-b .elementor-wc-products .mn-card__art {
	border-bottom: 1px solid #e3ddd3;
}

/* --- ג׳ light: quiet banner, the title leads ---------------------- */

body.mn-cards-c .elementor-wc-products .mn-card__gradient {
	background-image: linear-gradient( 160deg, #fbf5ec 0%, #f2e7d6 100% ) !important;
}

body.mn-cards-c .elementor-wc-products .mn-card__art {
	border-bottom: 3px solid var( --mn-primary );
}

body.mn-cards-c .elementor-wc-products .mn-card__caption {
	color: #2a2a2a;
	text-shadow: none;
}

body.mn-cards-c .elementor-wc-products .mn-card__org {
	background: #17202b;
	color: #fff;
}

body.mn-cards-c .elementor-wc-products ul.products li.product {
	box-shadow: 0 1px 2px rgba( 23, 32, 43, 0.04 ), 0 6px 18px -12px rgba( 23, 32, 43, 0.2 ) !important;
}

/* --- ללא באנר: an orange rule on top, the title first ------------- */

body.mn-cards-n .elementor-wc-products ul.products li.product {
	border-top: var( --mn-card-top-w, 4px ) solid var( --mn-card-top, var( --mn-primary ) ) !important;
}

body.mn-cards-n .elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
	padding-top: 16px !important;
	font-size: var( --mn-title-size, 17px ) !important;
	-webkit-line-clamp: 3;
}

/* ================================================= "מה כוללת הערכה?" row */

/* The plugin prints two quick-view links per card: one at the top of the buy
   form, one after it. The theme hides the first; the card now shows that one,
   as a full row above the plans, and hides the trailing one. */
.elementor-wc-products ul.products li.product > a.yith-wcqv-button {
	display: none !important;
}

.elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button {
	order: -1;
	display: flex !important;
	align-items: center;
	gap: 9px;
	width: 100% !important;
	height: 42px !important;
	/* a little air before the plans below it */
	margin: 0 0 5px !important;
	padding: 0 12px !important;
	border: 1px solid var( --mn-primary-line ) !important;
	border-radius: 4px !important;
	/* Longhands only: an !important `background` shorthand would also pin
	   background-position, and no animation can move an !important value. */
	background-color: var( --mn-primary-tint ) !important;
	background-image: none !important;
	color: #17202b !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: start !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	/* The list icon, cut out of the icon colour: a data URI cannot take a
	   custom property, a mask over a plain background can. */
	background: var( --mn-info-icon, var( --mn-primary ) );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.3' fill='%23000'/%3E%3Ccircle cx='4.5' cy='12' r='1.3' fill='%23000'/%3E%3Ccircle cx='4.5' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.3' fill='%23000'/%3E%3Ccircle cx='4.5' cy='12' r='1.3' fill='%23000'/%3E%3Ccircle cx='4.5' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* A chevron pointing the way in (left, in RTL). */
.elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-inline-start: auto;
	border-left: 2px solid var( --mn-info-icon, var( --mn-primary ) );
	border-bottom: 2px solid var( --mn-info-icon, var( --mn-primary ) );
	transform: rotate( 45deg );
}

.elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button:hover {
	border-color: var( --mn-primary ) !important;
	background-color: var( --mn-primary-tint-strong ) !important;
	color: #17202b !important;
}

.elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button span {
	flex: 1;
	min-width: 0;
}

/* ============================================================ plan label */

.elementor-wc-products .mn-card__planslabel,
.mn-qv-foot .mn-card__planslabel {
	margin: 2px 0 -3px !important;
	font-size: 12.5px;
	font-weight: 600;
	color: #8b949f;
	line-height: 1.4;
	text-align: start;
}

/* ============================================= direct flow: plan = buy */

body.mn-flow-direct .elementor-wc-products ul.products li.product .single_variation_wrap,
body.mn-flow-direct .mn-qv-foot .single_variation_wrap {
	display: none !important;
}

body.mn-flow-direct .elementor-wc-products .mn-card__plansrow,
body.mn-flow-direct .mn-qv-foot .mn-card__plansrow {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 6px;
}

body.mn-flow-direct .elementor-wc-products .mn-card__plan,
body.mn-flow-direct .mn-qv-foot .mn-card__plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 52px;
	padding: 6px 4px;
	border: 1px solid var( --mn-primary );
	border-radius: 4px;
	background: var( --mn-primary );
	color: var( --mn-on-primary );
	font-size: 14px;
	font-weight: 700;
	white-space: normal;
	box-shadow: none;
}

body.mn-flow-direct .elementor-wc-products .mn-card__plan:hover,
body.mn-flow-direct .mn-qv-foot .mn-card__plan:hover {
	background: var( --mn-primary-strong );
	border-color: var( --mn-primary-strong );
	color: var( --mn-on-primary-strong );
}

body.mn-flow-direct .mn-card__plan .mn-card__planprice {
	font-size: 12.5px;
	font-weight: 600;
	opacity: 0.85;
}

body.mn-flow-direct .mn-card__plan.is-busy {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

/* An odd plan out spans the row rather than sitting alone in half of it. */
body.mn-flow-direct .mn-card__plansrow .mn-card__plan:last-child:nth-child( odd ) {
	grid-column: 1 / -1;
}

/* ================================ "מה כוללת הערכה?" — darker styles */

/* All three share the charcoal of the site's top bar, so the row reads as
   important without competing with the orange buy button. Its own colours,
   when chosen, replace it: one colour is a plain fill, a second one makes a
   gradient. The fill, at rest and hovered, is worked out here, on the row. */
body.mn-info-dark .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button,
body.mn-info-shine .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button,
body.mn-info-shift .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button {
	--mn-info-fill: linear-gradient( var( --mn-info-angle, 135deg ), var( --mn-info-bg, var( --mn-secondary-from ) ) 0%, var( --mn-info-bg2, var( --mn-info-bg, var( --mn-secondary-to ) ) ) 100% );
	--mn-info-fill-hover: linear-gradient( var( --mn-info-angle, 135deg ), var( --mn-info-hover-from, var( --mn-secondary-hover-from ) ) 0%, var( --mn-info-hover-to, var( --mn-secondary ) ) 100% );
	height: var( --mn-info-height, 46px ) !important;
	border-width: var( --mn-info-border-w, 1px ) !important;
	border-color: var( --mn-info-border, var( --mn-info-border-auto, var( --mn-secondary-line ) ) ) !important;
	border-radius: var( --mn-info-radius, 4px ) !important;
	background-color: var( --mn-info-bg, var( --mn-secondary ) ) !important;
	background-image: var( --mn-info-fill ) !important;
	background-repeat: no-repeat !important;
	color: var( --mn-info-text, var( --mn-info-text-auto, var( --mn-on-secondary ) ) ) !important;
	/* A touch larger than it was (the owner asked, 24/09/2026). */
	font-size: var( --mn-info-size, 16px ) !important;
	font-weight: var( --mn-info-weight, 700 ) !important;
	box-shadow: var( --mn-info-shadow, 0 6px 14px -8px rgba( 0, 0, 0, 0.45 ) ) !important;
}

body.mn-info-dark .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button:hover,
body.mn-info-shine .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button:hover,
body.mn-info-shift .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button:hover {
	border-color: var( --mn-info-hover, var( --mn-primary ) ) !important;
	background-color: var( --mn-info-hover-to, var( --mn-secondary-hover ) ) !important;
	background-image: var( --mn-info-fill-hover ) !important;
	color: var( --mn-info-text, var( --mn-info-text-auto, var( --mn-on-secondary ) ) ) !important;
}

/* --- shine: one sweep of light each time the card is entered ---------- */

/* At rest the band sits just off the right edge, out of sight. The sweep is
   declared only while the card is hovered (or holds keyboard focus), so it
   is dropped on the way out and plays from the start on the way back in —
   once per visit, never on a loop. */
body.mn-info-shine .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button {
	background-image:
		linear-gradient( 110deg, rgba( 255, 255, 255, 0 ) 40%, var( --mn-shine ) 50%, rgba( 255, 255, 255, 0 ) 60% ),
		var( --mn-info-fill ) !important;
	background-size: 260% 100%, 100% 100% !important;
	background-position: 0% 0, 0 0;
}

body.mn-info-shine .elementor-wc-products ul.products li.product:hover form.cart > a.yith-wcqv-button.button,
body.mn-info-shine .elementor-wc-products ul.products li.product:focus-within form.cart > a.yith-wcqv-button.button {
	animation: var( --mn-info-shine, mn-info-sheen ) 1s cubic-bezier( 0.4, 0, 0.2, 1 ) 1;
}

/* Keep the sweep's two-layer background while the row itself is hovered,
   instead of swapping to the plain hover gradient mid-sweep. */
body.mn-info-shine .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button:hover {
	background-image:
		linear-gradient( 110deg, rgba( 255, 255, 255, 0 ) 40%, var( --mn-shine ) 50%, rgba( 255, 255, 255, 0 ) 60% ),
		var( --mn-info-fill-hover ) !important;
}

@keyframes mn-info-sheen {
	from { background-position: 0% 0, 0 0; }
	to   { background-position: 100% 0, 0 0; }
}

/* --- shift: charcoal drifting toward warm brown and back -------------- */

body.mn-info-shift .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button {
	background-image: linear-gradient( 120deg, #161616 0%, #3d2714 35%, #1d1d1d 65%, #4a2c12 100% ) !important;
	background-size: 300% 100% !important;
	/* Its own fixed dark browns, not the secondary colour: its text stays white. */
	color: #fff !important;
	animation: mn-info-drift 7s ease-in-out infinite alternate;
}

@keyframes mn-info-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

@media ( prefers-reduced-motion: reduce ) {
	body.mn-info-shine .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button,
	body.mn-info-shift .elementor-wc-products ul.products li.product form.cart > a.yith-wcqv-button.button {
		animation: none;
	}
}