/* ==========================================================================
   Alina Upsell — "הוסיפו להזמנה"
   מבוסס על עיצוב Figma (node 14:9882). RTL: תמונה בימין, תוכן בשמאל.
   יחידות ב-rem לפי 1rem = 18px.
   ========================================================================== */

.alina-upsell {
	--au-teal:   #687b7b;   /* ירוק/טורקיז מותג — תיאור, צ'קבוקס מסומן, מסגרת בורר */
	--au-cream:  #fffbf3;   /* טאב פעיל */
	--au-badge:  #bbd4ff;   /* באדג' חיסכון */
	--au-border: #dcdcdc;
	--au-black:  #000;

	direction: rtl;
	text-align: right;
	/* פונט האתר (כמו ב-Figma) — לא להסתמך על inherit שנופל לפונט מערכת */
	font-family: 'fbextaza', 'Rubik', 'Heebo', 'Assistant', sans-serif;
	margin: 0.889rem 0;
	color: var(--au-black);

	/* הקופסה מוזרקת לתוך .woocommerce-variation-add-to-cart שהוא flex-row
	   (כמות + כפתור). מאלצים אותה לתפוס שורה מלאה משלה, מעל הכפתור. */
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	clear: both;
}

/* גורם לשורת ה-add-to-cart לעבור לשורה הבאה אחרי הקופסה (רק כשהקופסה קיימת) */
.woocommerce-variation-add-to-cart:has( > .alina-upsell ),
.woocommerce-variation-add-to-cart:has( > div > .alina-upsell ) {
	flex-wrap: wrap;
}

.alina-upsell,
.alina-upsell *,
.alina-upsell *::before,
.alina-upsell *::after {
	box-sizing: border-box;
	line-height: 1em;
}

.alina-upsell__title {
	font-size: 0.778rem;
	font-weight: 400;
	margin-bottom: 0.444rem;
}

/* ---- טאבים ---- */
.alina-upsell__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.444rem;
	margin-bottom: 0.444rem;
	justify-content: flex-start; /* RTL → ימין */
}

/* span (לא button) כדי לא לרשת את עיצוב הכפתורים של הערכה.
   הצהרות מפורשות שמנטרלות סגנון אפשרי שדולף מה-theme. */
.alina-upsell .alina-upsell__tab {
	flex: 0 0 auto;
	width: auto;
	min-width: 5.333rem;
	height: 1.778rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.778rem;
	margin: 0;
	font-size: 0.833rem;
	font-weight: 400;
	font-family: inherit;
	line-height: 1em;
	color: var(--au-black);
	background: #fff;
	border: 0.056rem solid var(--au-border);
	border-radius: 0.278rem;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, border-color .15s ease;
}

.alina-upsell .alina-upsell__tab.is-active {
	background: var(--au-cream);
	border: 0.056rem solid var(--au-black);
	font-weight: 500;
}

/* ---- פאנלים ---- */
.alina-upsell__panel {
	display: none;
}

.alina-upsell__panel.is-active {
	display: block;
}

/* ---- קרוסלה ---- */
.alina-upsell__cards {
	display: flex;
	gap: 0.556rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.222rem 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;       /* Firefox — בלי פס גלילה */
	-ms-overflow-style: none;    /* IE/Edge ישן */
	cursor: grab;                /* רמז שאפשר לגרור */
}

.alina-upsell__cards.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;       /* בזמן גרירה בלי אנימציה */
	user-select: none;
}

.alina-upsell__cards.is-dragging img {
	pointer-events: none;
}

.alina-upsell-card__media img {
	-webkit-user-drag: none;
	user-select: none;
}

/* הסתרת פס הגלילה ב-WebKit (Chrome/Safari) */
.alina-upsell__cards::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* ---- כרטיס ---- */
.alina-upsell-card {
	position: relative;
	display: flex;
	gap: 0.556rem;
	flex: 0 0 auto;
	width: 88%;
	max-width: 88%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	background: #fff;
	border: 0.056rem solid var(--au-border);
	border-radius: 0.167rem;
	padding: 0.556rem;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.alina-upsell-card.is-selected {
	border-color: var(--au-teal);
	box-shadow: 0 0 0 0.056rem var(--au-teal);
}

/* תמונה (ימין) — רוחב קבוע 130px (Figma), גובה נמתח לגובה המלא של הכרטיס
   כדי שלא יישאר שטח ריק כשהגוף גבוה יותר (תת-כותרת ב-2 שורות במובייל). */
.alina-upsell-card__media {
	flex: 0 0 7.222rem;     /* רוחב 130px */
	align-self: stretch;    /* גובה מלא של הכרטיס */
	position: relative;
}

.alina-upsell-card__media img {
	width: 7.222rem;        /* 130px */
	height: 100%;           /* ממלא את גובה התיבה */
	object-fit: cover;
	border-radius: 0.167rem;
	display: block;
}

.alina-upsell-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--au-badge);
	color: var(--au-black);
	font-size: 0.778rem;
	line-height: 1em;
	padding: 0.111rem 0.222rem 0.167rem 0.333rem;
	border-bottom-left-radius: 0.556rem;
	border-bottom: 0.056rem solid #fff;
	border-left: 0.056rem solid #fff;
	white-space: nowrap;
	filter: drop-shadow( -0.056rem 0.056rem 0.056rem rgba( 0, 0, 0, .12 ) );
}

.alina-upsell-card__badge-num {
	font-size: 0.889rem;
}

/* תוכן (שמאל) */
.alina-upsell-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.556rem;          /* 10px — רווח בין הבלוקים (כותרות / מידה / מחיר) */
	align-items: stretch;
}

.alina-upsell-card__head {
	display: flex;
	gap: 0.111rem;
	align-items: flex-start;
	width: 100%;
}

.alina-upsell-card__titles {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.222rem;           /* 4px — רווח בין הכותרת לתת-הכותרת */
	align-items: stretch;    /* רוחב מלא; היישור לימין נעשה ב-text-align (נכון ל-RTL) */
	text-align: right;
}

.alina-upsell-card__title {
	font-size: 0.889rem;
	line-height: 1em;
	color: var(--au-black);
	text-align: right;
}

.alina-upsell-card__desc {
	font-size: 0.778rem;
	line-height: 1em;
	color: var(--au-teal);
	text-align: right;
	width: 100%;   /* רוחב מלא לתת-הכותרת */
}

/* צ'קבוקס מותאם — בזרימה הרגילה (תופס נדל"ן), משמאל לכותרת */
.alina-upsell-card__check {
	flex: 0 0 auto;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.alina-upsell-card__checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	border: 0.056rem solid var(--au-black);
	border-radius: 0.167rem;
	background: #fff;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
}

.alina-upsell-card__checkbox:checked {
	background: var(--au-teal);
	border-color: var(--au-teal);
}

.alina-upsell-card__checkbox:checked::after {
	content: "";
	position: absolute;
	left: 0.278rem;
	top: 0.056rem;
	width: 0.278rem;
	height: 0.5rem;
	border: solid #fff;
	border-width: 0 0.111rem 0.111rem 0;
	transform: rotate( 45deg );
}

/* בורר מידה */
.alina-upsell-card__size {
	display: flex;
	gap: 0.278rem;
	align-items: center;
	width: 100%;
}

.alina-upsell-card__size-label {
	flex: 0 0 auto;
	font-size: 0.778rem;
	color: var(--au-black);
}

/* ספציפיות גבוהה + important כדי לדרוס את סגנון ה-select של הערכה/WooCommerce */
.alina-upsell .alina-upsell-card__variation {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.5rem !important;       /* 27px */
	min-height: 1.5rem !important;
	max-height: 1.5rem !important;
	border: 0.056rem solid var(--au-teal);
	border-radius: 0.167rem;
	padding: 0 0.556rem !important;  /* בלי padding אנכי */
	font-size: 0.778rem !important;
	font-family: inherit;
	background: #fff;
	color: var(--au-black);
	line-height: 1em;
}

/* מחיר — מספרים LTR, מיושר לימין הגוף */
.alina-upsell-card__price {
	direction: ltr;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.333rem;
	width: 100%;
}

.alina-upsell-card__regular {
	color: var(--au-black);
	text-decoration: line-through;
	font-size: 1rem;
}

.alina-upsell-card__sale {
	color: var(--au-black);
	font-weight: 700;
	font-size: 1rem;
}

.alina-upsell-card__regular .woocommerce-Price-currencySymbol,
.alina-upsell-card__sale .woocommerce-Price-currencySymbol {
	font-size: 0.778rem;
}

/* סימן השקל במחיר המחוק — בלי קו מוחק עליו (inline-block יוצר הקשר עיטור נפרד) */
.alina-upsell-card__regular .woocommerce-Price-currencySymbol {
	display: inline-block;
	text-decoration: none;
}

.alina-upsell-card__sale .woocommerce-Price-amount {
	text-decoration: none;
}

/* ==========================================================================
   מובייל — כרטיס רחב יותר (92% במקום 88%)
   ========================================================================== */
@media (max-width: 767px) {
	.alina-upsell-card {
		width: 92%;
		max-width: 92%;
	}
}