/* =========================================================================
   models.css — רשימות הדגמים לפי דור (inc/models-ui.php), 14/9/2026.
   צבעים דרך --bp-* (palette.css של barphone-refresh מגדיר אותם); חריג אחד:
   מסגרת הצ'יפ לוקחת --pal-line-2 (#b9b1d2) כשהוא קיים — הצבע שהפלטה שמרה
   לכפתורים משניים ש"חייבים להיראות לחיצים", עם נפילה ל---bp-line.
   ספציפיות: html .bpx-on .bpx-mg a.bpx-mg-chip (0,3,2) גוברת במכוון על
   ".bpx-on .bpx-landing a:not(.bpx-btn)" (0,3,1), על כללי .bpx-drawer-link
   במגירה, ועל barphone.css ".bpx-drawer-link > span:first-of-type {flex:1}"
   שהזיז את טקסט הצ'יפים במגירה למעלה. אותו דבר לכפתורי המותגים (.bpx-mg-jump)
   שיושבים גם הם בתוך .bpx-landing.
   ========================================================================= */

.bpx-vh {
	position: absolute !important; width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important; overflow: hidden !important;
	clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
	white-space: nowrap !important; border: 0 !important;
}

.bpx-mg { margin: 0 0 8px; }
.bpx-mg-series + .bpx-mg-series { margin-top: 20px; }
html .bpx-on .bpx-mg .bpx-mg-series-h {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; padding: 0;
	font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
	color: var(--bp-body); text-transform: none;
}
html .bpx-on .bpx-mg .bpx-mg-series-h::before { display: none; }
html .bpx-on .bpx-mg .bpx-mg-series-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bp-line); }

/* ---------- שורות ---------- */
.bpx-mg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bpx-mg-row {
	display: flex; align-items: center; gap: 14px; min-width: 0;
	padding: 10px 12px; background: #fff;
	border: 1px solid var(--bp-line-soft, var(--bp-line)); border-radius: 14px;
}
.bpx-mg-title {
	flex: 0 0 auto; min-width: 104px; /* "Galaxy Note 20" גדל לשורה אחת במקום להישבר */
	font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--bp-ink);
}
.bpx-mg-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bpx-mg-row--wide { grid-column: 1 / -1; } /* רק שורה ארוכה (Galaxy A) על כל הרוחב; קצרה יושבת בעמודה */
.bpx-mg-row--flat .bpx-mg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

/* ---------- צ'יפ ---------- */
html .bpx-on .bpx-mg a.bpx-mg-chip {
	position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	width: auto; min-width: 66px; min-height: 42px; margin: 0; padding: 6px 12px;
	border: 1.5px solid var(--pal-line-2, var(--bp-line)); border-radius: 10px; background: #fff;
	color: var(--bp-ink); font-size: 14px; font-weight: 600; line-height: 1.2;
	text-align: center; text-decoration: none; white-space: nowrap; box-shadow: none;
	transition: border-color .15s, background-color .15s, color .15s;
}
html .bpx-on .bpx-mg a.bpx-mg-chip > span { display: block; min-width: 0; flex: 0 0 auto; }
html .bpx-on .bpx-mg a.bpx-mg-chip:hover,
html .bpx-on .bpx-mg a.bpx-mg-chip:focus-visible {
	border-color: var(--bp-primary); background: var(--bp-primary-l); color: var(--bp-primary-d); text-decoration: none;
}
.bpx-mg-chip-price { font-size: 12.5px; font-weight: 700; color: var(--bp-primary-d); }
html .bpx-on .bpx-mg a.bpx-mg-chip.is-current,
html .bpx-on .bpx-mg a.bpx-mg-chip.is-current:hover {
	background: var(--bp-primary); border-color: var(--bp-primary); color: #fff;
}
html .bpx-on .bpx-mg a.bpx-mg-chip.is-current .bpx-mg-chip-price { color: #fff; }

/* מחשב: הצ'יפים של שורת דור ממלאים את הכרטיס ב-4 עמודות שוות שמתיישרות בין כרטיסים */
@media (min-width: 641px) {
	html .bpx-on .bpx-mg:not(.bpx-mg--drawer) .bpx-mg-row:not(.bpx-mg-row--flat) a.bpx-mg-chip {
		flex: 0 0 calc((100% - 19px) / 4);
		min-width: max-content;
	}
}

/* ---------- טבלת מחירים (עמודי השירות) ---------- */
.bpx-mg--prices { margin: 4px 0 18px; }
.bpx-mg--prices .bpx-mg-list { grid-template-columns: 1fr; gap: 8px; }
.bpx-mg--prices .bpx-mg-title { flex-basis: 120px; }
html .bpx-on .bpx-mg--prices a.bpx-mg-chip { min-width: 96px; }
.bpx-mg--prices .bpx-mg-row--flat .bpx-mg-chips { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.bpx-mg-brand { scroll-margin-top: 130px; }
.bpx-mg-brand + .bpx-mg-brand { margin-top: 26px; }
html .bpx-on .bpx-mg .bpx-mg-brand-h {
	margin: 0 0 12px; padding: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--bp-ink);
}
html .bpx-on .bpx-mg .bpx-mg-brand-h::before { display: none; }
.bpx-mg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
html .bpx-on .bpx-mg .bpx-mg-jump a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 7px 16px;
	border: 1.5px solid var(--pal-line-2, var(--bp-line)); border-radius: 999px; background: #fff;
	color: var(--bp-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
html .bpx-on .bpx-mg .bpx-mg-jump a:hover,
html .bpx-on .bpx-mg .bpx-mg-jump a:focus-visible { border-color: var(--bp-primary); color: var(--bp-primary-d); text-decoration: none; }

/* ---------- עוד דגמים (עמוד דגם) ---------- */
.bpx-sibs .bpx-mg { margin: 0; }
.bpx-sibs:not(.is-open) .bpx-mg-row--more { display: none; }
html .bpx-on .bpx-sibs:not(.is-open) .bpx-mg a.bpx-mg-chip--more { display: none; }

/* ---------- עמודה צרה: נייד ---------- */
@media (max-width: 640px) {
	.bpx-mg-list { grid-template-columns: 1fr; gap: 8px; }
	.bpx-mg-row { flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 10px; border-radius: 12px; }
	.bpx-mg .bpx-mg-title,
	.bpx-mg--prices .bpx-mg-title { flex: none; font-size: 14px; } /* 0,2,0 — חייב לגבור על flex-basis של מחשב, שבעמודה הופך לגובה */
	.bpx-mg-chips { display: grid; gap: 6px; }
	.bpx-mg-n1 .bpx-mg-chips { grid-template-columns: 1fr; }
	.bpx-mg-n2 .bpx-mg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bpx-mg-n3 .bpx-mg-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bpx-mg-n4 .bpx-mg-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	html .bpx-on .bpx-mg a.bpx-mg-chip,
	html .bpx-on .bpx-mg--prices a.bpx-mg-chip { min-width: 0; min-height: 44px; padding: 6px 4px; font-size: 13px; white-space: normal; }
	.bpx-mg-chip-price { font-size: 12px; }
	.bpx-mg-row--flat .bpx-mg-chips,
	.bpx-mg--prices .bpx-mg-row--flat .bpx-mg-chips { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
	.bpx-mg-row--flat.bpx-mg-row--wide .bpx-mg-chips { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } /* Galaxy A: 4 בשורה במקום 3 */
	.bpx-mg-brand + .bpx-mg-brand { margin-top: 22px; }
	html .bpx-on .bpx-mg .bpx-mg-brand-h { font-size: 17px; }
	.bpx-mg-jump { gap: 6px; }
	html .bpx-on .bpx-mg .bpx-mg-jump a { min-height: 38px; padding: 6px 12px; font-size: 13.5px; }
}

/* ---------- מגירת התפריט (תמיד צרה) ---------- */
html .bpx-on .bpx-drawer-panel > a.bpx-drawer-link.bpx-drawer-all--full { display: flex; width: 100%; justify-content: center; margin: 4px 0 2px; }
.bpx-mg--drawer { margin: 10px 0 0; }
.bpx-mg--drawer .bpx-mg-list { grid-template-columns: 1fr; gap: 6px; }
.bpx-mg--drawer .bpx-mg-series + .bpx-mg-series { margin-top: 14px; }
.bpx-mg--drawer .bpx-mg-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 12px; }
.bpx-mg--drawer .bpx-mg-title { flex: none; font-size: 13.5px; }
.bpx-mg--drawer .bpx-mg-chips { display: grid; gap: 5px; }
.bpx-mg--drawer .bpx-mg-n1 .bpx-mg-chips { grid-template-columns: 1fr; }
.bpx-mg--drawer .bpx-mg-n2 .bpx-mg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpx-mg--drawer .bpx-mg-n3 .bpx-mg-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpx-mg--drawer .bpx-mg-n4 .bpx-mg-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bpx-mg--drawer .bpx-mg-row--flat .bpx-mg-chips { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
html .bpx-on .bpx-mg--drawer a.bpx-mg-chip { min-width: 0; min-height: 40px; padding: 5px 4px; font-size: 13px; white-space: normal; }
html .bpx-on .bpx-mg--drawer .bpx-mg-series-h { margin: 0 2px 8px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
	html .bpx-on .bpx-mg a.bpx-mg-chip { transition: none; }
}