/* Small fixes on top of the v3 design (mx.css). Loaded after it on every page. */

/* Course covers shown small (student area list, cart, search): the title overlay has a
   minimum font size, so in a narrow cover it overflowed and was cut off. The course
   name is always printed next to these small covers, so the drawing alone is enough. */
@container (max-width: 260px) {
	.mx-cover-text { display: none; }
}

/* Profile pictures: square blueprint tiles, shown as rounded squares like the rest of the cards (not circles) */
.mx-ms-avatar, .mx-ms-avatar img { border-radius: 18px; }
.mx-ms-avatar img { object-fit: cover; }
.mx-ms-avatar-edit { inset-inline-end: -6px; bottom: -6px; }
.mx-ms-pics .profile-pic { border-radius: 16px; }
.mx-ms-pics .profile-pic.selected { box-shadow: 0 0 0 3px var(--mx-surface, #fff), 0 0 0 6px var(--mx-brand, #F5A000); }

/* הלימודים שלי: "continue where you stopped" card above the course list */
.mx-ms-next { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 clamp(32px, 4vw, 48px); padding: 22px 24px; border-radius: var(--mx-radius-lg, 16px); background: var(--mx-blue, #0D2742); color: var(--mx-blue-ink, #EAF1F8); background-image: linear-gradient(rgba(234, 241, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 241, 248, .06) 1px, transparent 1px); background-size: 24px 24px; }
.mx-ms-next-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-ms-next .mx-ms-k { color: var(--mx-brand, #F5A000); }
.mx-ms-next-title { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 900; line-height: 1.2; color: #fff; }
.mx-ms-next .mx-ms-s { color: rgba(234, 241, 248, .8); }
.mx-ms-next-go { flex: none; min-width: 220px; }
@media (max-width: 640px) { .mx-ms-next { flex-direction: column; align-items: stretch; padding: 18px; } .mx-ms-next-go { min-width: 0; } }

/* lesson rows: "כאן עצרתם" chip in the progress column, the button always in the last column */
.mx-ms-lessons li .mx-ms-lplay { grid-column: -2; }
.mx-ms-lhere { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--mx-brand-soft, #FFF1D6); color: #6B4500; font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.mx-ms-lessons li.is-done .mx-ms-n::after { content: "✓"; }
.mx-ms-lessons li.is-done .mx-ms-n bdi { display: none; }
@media (max-width: 720px) {
	.mx-ms-lessons li .mx-ms-lplay { grid-column: auto; }
	.mx-ms-lhere { grid-area: prog; }
}

/* access ends soon */
.mx-ms-expiring { margin: -6px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--mx-brand-soft, #FFF1D6); color: #4A3000; font-size: .9375rem; font-weight: 600; }
.mx-ms-expiring a { color: inherit; font-weight: 800; }

/* הלימודים שלי: "דרגו את הקורס" text sat at the top of the stretched button */
.mx-ms-rate { display: flex; align-items: center; justify-content: center; }

/* הלימודים שלי: lesson progress read "% 0" — keep "0%" together, bar on the left */
.mx-ms-lprog { direction: ltr; gap: 0 !important; }
.mx-ms-lprog .progress-bar { order: -1; margin-right: 10px !important; }

/* registration form: "(אופציונלי)" was glued to the field label */
.um-field-label .toltip { margin-inline-start: 6px; font-size: .875rem; color: var(--mx-ink-3, #5F6B77); }
.um-field-label .toltip strong { font-weight: 500; }
/* newsletter checkbox: the sentence is now the checkbox label; the link under it opens the full text */
.declaration_checkbox_text { margin-top: -4px; font-size: .875rem; color: var(--mx-ink-3, #5F6B77); text-decoration: underline; cursor: pointer; }

/* בוחרים נכון: comments under the episodes */
.mx-pc { padding-block: clamp(40px, 6vw, 80px); background: var(--mx-paper, #F5F6F8); font-family: var(--mx-font, Heebo, Arial, sans-serif); }
.mx-pc-in { max-width: 760px; margin-inline: auto; }
.mx-pc .mx-h3 { margin: 0 0 6px; }
.mx-pc-lead { margin: 0 0 22px; color: var(--mx-ink-2, #3D4955); }
.mx-pc-thanks { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: #E8F5EE; color: #1E5E3C; font-weight: 700; }
.mx-pc-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mx-pc-item { padding: 16px 18px; border-radius: 8px; background: var(--mx-surface, #fff); box-shadow: 0 0 0 1px var(--mx-tone, #ECEFF3); }
.mx-pc-meta { margin: 0 0 6px; font-size: .9375rem; color: var(--mx-ink-3, #5F6B77); }
.mx-pc-meta strong { color: var(--mx-ink, #10181F); }
.mx-pc-text { line-height: 1.65; }
.mx-pc-empty { margin: 0 0 22px; color: var(--mx-ink-3, #5F6B77); }
.mx-pc #respond { padding: 20px 22px; border-radius: 8px; background: var(--mx-surface, #fff); box-shadow: 0 0 0 1px var(--mx-tone, #ECEFF3); }
.mx-pc-form-h { margin: 0 0 6px; font-size: 1.125rem; font-weight: 800; }
.mx-pc-note { margin: 0 0 14px; font-size: .875rem; color: var(--mx-ink-3, #5F6B77); }
.mx-pc #commentform p { margin: 0 0 14px; }
.mx-pc #commentform label { display: block; margin-bottom: 6px; font-weight: 700; }
.mx-pc #commentform input[type="text"], .mx-pc #commentform input[type="email"], .mx-pc #commentform textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--mx-line, #D5DCE3); border-radius: 4px; background: #fff; font: inherit; }
.mx-pc #commentform input:focus, .mx-pc #commentform textarea:focus { border-color: var(--mx-ink, #10181F); outline: none; }
.mx-pc #commentform .form-submit { margin: 4px 0 0; }
.mx-pc #commentform .comment-form-cookies-consent { display: none; }
@media (min-width: 640px) { .mx-pc #commentform .comment-form-author, .mx-pc #commentform .comment-form-email { display: inline-block; width: calc(50% - 8px); vertical-align: top; } .mx-pc #commentform .comment-form-author { margin-inline-end: 12px; } }

/* Phones: the accessibility button sat on the home search field. Move it to the bottom corner, above
   the WhatsApp button; the panel opens upwards from it. */
@media (max-width: 767px) {
	#pojo-a11y-toolbar { top: auto !important; bottom: 84px; }
	#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { top: auto; bottom: 0; }
	#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { padding: 8px; }
	#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a svg { width: 26px; height: 26px; }
}

/* 19.10.2026: /two-factor/ code boxes in one LTR row (they were stacked full width, one under another). */
.auth_code fieldset { border: 0; padding: 0; margin: 12px 0 4px; min-width: 0; }
.auth_code fieldset legend { float: none; width: 100%; padding: 0; margin: 0 0 10px; text-align: center; font-size: 16px; }
.auth_code fieldset > div {
	display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 8px;
	direction: ltr; width: 100%; max-width: 336px; margin: 0 auto;
}
.auth_code input.otp,
.auth_code input.otp[type=number] {
	display: block !important; flex: 1 1 0; width: auto !important; min-width: 0; max-width: 48px;
	height: 56px !important; margin: 0 !important; padding: 0 !important;
	text-align: center; font-size: 24px; font-weight: 700; line-height: 56px; font-variant-numeric: tabular-nums;
	border: 1.5px solid #D5DCE3; border-radius: 12px; background: #fff; color: #10181F;
	-moz-appearance: textfield; appearance: textfield;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.auth_code input.otp::-webkit-outer-spin-button,
.auth_code input.otp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auth_code input.otp:focus { outline: none; border-color: #F5A000; box-shadow: 0 0 0 3px rgba(245, 160, 0, .25); }
@media (prefers-reduced-motion: reduce) { .auth_code input.otp { transition: none; } }

/* 20.10.2026: unit headings in a course's lesson list (lesson meta mx_chapter) + the recording-order box */
.mx-lessons .mx-lesson-chapter { list-style: none; margin: 18px 0 6px; padding: 0; }
.mx-lessons .mx-lesson-chapter:first-child { margin-top: 0; }
.mx-lessons .mx-lesson-chapter h3 { margin: 0; padding: 0 2px 6px; font-size: .9375rem; font-weight: 800; color: var(--mx-ink-2, #3D4955); border-bottom: 2px solid var(--mx-brand, #F5A000); display: inline-block; }
.mx-rec-order { margin: 10px 0 14px; padding: 12px 16px; border-radius: var(--mx-radius-lg, 8px); background: var(--mx-paper, #F5F6F8); }
.mx-rec-order summary { cursor: pointer; font-weight: 800; }
.mx-rec-order ol { margin: 10px 0 0; padding-inline-start: 22px; columns: 2 260px; column-gap: 28px; }
.mx-rec-order li { break-inside: avoid; padding: 2px 0; }