/* Ortoosiabimees ja toestuse taseme märgised — kõik reeglid .mp-or* all.
   Brändivärvid: põhi #3D3C6C, aktsent #56B9EA. */

:root {
	--or-brand: #3d3c6c;
	--or-brand-2: #385770;
	--or-accent: #56b9ea;
	--or-accent-l: #e9f6fc;
	--or-ink: #1d2233;
	--or-ink-2: #5a6378;
	--or-line: #e1e6ee;
	--or-bg: #f5f7fb;
	--or-kerge: #56b9ea;
	--or-keskmine: #385770;
	--or-tugev: #3d3c6c;
	--or-kaitse: #e2a23b;
}

/* --- Taseme täpid --- */
.mp-or-dots { display: inline-flex; gap: 3px; margin-right: 7px; vertical-align: middle; }
.mp-or-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; display: block; opacity: .55; }
.mp-or-dots i.on { background: currentColor; opacity: 1; }

/* --- Märgis tootekaardil ja tootelehel --- */
.mp-or-badge { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.3; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--or-accent-l); color: var(--or-brand); }
.mp-or-badge b { font-weight: 700; }
.mp-or-badge--kerge { color: #2378a6; background: #e9f6fc; }
.mp-or-badge--keskmine { color: var(--or-keskmine); background: #e6eef4; }
.mp-or-badge--tugev { color: #fff; background: var(--or-tugev); }
.mp-or-badge--loop { margin: 4px 0 6px; font-size: 11px; padding: 3px 9px; }
.product-grid-item .mp-or-badge--loop, .wd-product .mp-or-badge--loop { display: inline-flex; }

.mp-or-single { margin: 4px 0 22px; padding: 14px 16px; border: 1px solid var(--or-line); border-radius: 12px; background: var(--or-bg); }
.mp-or-single .mp-or-badge { font-size: 13px; }
.mp-or-single p { margin: 8px 0 4px; font-size: 14px; color: var(--or-ink-2); }
.mp-or-single a { font-size: 13px; font-weight: 600; color: var(--or-brand); }

/* --- Kategoorialehe bänner --- */
.mp-or-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 24px; padding: 16px 20px; border-radius: 14px; background: var(--or-bg); border: 1px solid var(--or-line); }
.mp-or-banner__txt { display: flex; flex-direction: column; flex: 1 1 220px; line-height: 1.35; }
.mp-or-banner__txt b { color: var(--or-brand); font-size: 16px; }
.mp-or-banner__txt span { color: var(--or-ink-2); font-size: 13px; }
.mp-or-banner__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-or-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--or-line); background: #fff; font-size: 13px; font-weight: 600; color: var(--or-brand) !important; text-decoration: none; transition: border-color .2s, background .2s; }
.mp-or-chip:hover { border-color: var(--or-brand); }
.mp-or-chip.is-active { background: var(--or-brand); border-color: var(--or-brand); color: #fff !important; }
.mp-or-banner__cta { margin-left: auto; padding: 9px 18px; border-radius: 999px; background: var(--or-brand); color: #fff !important; font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.mp-or-banner__cta:hover { background: var(--or-brand-2); }
@media (max-width: 768px) { .mp-or-banner__cta { margin-left: 0; } }

/* --- Abimees --- */
.mp-or { color: var(--or-ink); font-size: 16px; line-height: 1.6; max-width: 1220px; margin: 0 auto; }
.mp-or * { box-sizing: border-box; }
.mp-or.mp-or h1, .mp-or.mp-or h2, .mp-or.mp-or h3 { color: var(--or-brand); line-height: 1.2; margin: 0 0 .45em; font-weight: 600; }
.mp-or-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.mp-or-hero { text-align: center; padding: 36px 16px 8px; max-width: 760px; margin: 0 auto; }
.mp-or-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or-accent); margin-bottom: 10px; }
.mp-or.mp-or h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.02em; }
.mp-or h1 em { font-style: normal; color: var(--or-accent); }
.mp-or-hero p { color: var(--or-ink-2); font-size: 17px; }

.mp-or-step { margin-top: 36px; scroll-margin-top: 100px; }
.mp-or.mp-or .mp-or-step__title { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 2.4vw, 24px); }
.mp-or-step__title span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--or-accent); color: #fff; display: grid; place-items: center; font-size: 16px; }
.mp-or-step2 .mp-or-step__title { opacity: .45; }
.mp-or-hint { color: var(--or-ink-2); margin: 0; }

.mp-or-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mp-or-area { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border: 2px solid var(--or-line); border-radius: 16px; background: #fff; cursor: pointer; font-weight: 700; font-size: 17px; color: var(--or-brand); text-align: center; transition: border-color .2s, background .2s, color .2s; }
.mp-or-area:hover { border-color: var(--or-accent); }
.mp-or-area__ico { width: 52px; height: 52px; border-radius: 50%; background: var(--or-accent-l) center / 30px no-repeat; }
.mp-or-area--polv .mp-or-area__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3c6c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 2v7c0 1.5-.5 3-1.5 4.5S6 16.5 6.5 18L8 22M15 2v6c0 2 1 3 2 4.5s1 3 .5 4.5L16 22'/%3E%3Ccircle cx='12.5' cy='11.5' r='2.3'/%3E%3C/svg%3E"); }
.mp-or-area--hyppel .mp-or-area__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3c6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v10c0 1-1 2-2 3s-1.5 2.5-.5 3.5S8 20 10 20h9c1.5 0 2-1.5 1-2.5-1.5-1.5-4-2-6-3.5V2'/%3E%3Ccircle cx='12.5' cy='12.5' r='1.6'/%3E%3C/svg%3E"); }
.mp-or-area--rand .mp-or-area__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3c6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22v-6l-2.5-4.5c-.5-1 .5-2 1.5-1.3L8 11V4.5a1.2 1.2 0 0 1 2.4 0V10V3a1.2 1.2 0 0 1 2.4 0v7V4a1.2 1.2 0 0 1 2.4 0v6.5V6a1.2 1.2 0 0 1 2.3 0v7c0 3-1.5 5-3.5 6v3'/%3E%3Cpath d='M7 17.5h9'/%3E%3C/svg%3E"); }

.mp-or-sits { display: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mp-or-sit { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 2px solid var(--or-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.mp-or-sit:hover { border-color: var(--or-accent); }
.mp-or-sit b { color: var(--or-ink); font-size: 16px; line-height: 1.3; }
.mp-or-sit small { color: var(--or-ink-2); font-size: 13.5px; line-height: 1.4; }
.mp-or-sit__lvl { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mp-or-sit__lvl--kerge { color: #2378a6; }
.mp-or-sit__lvl--keskmine { color: var(--or-keskmine); }
.mp-or-sit__lvl--tugev { color: var(--or-tugev); }
.mp-or-sit__lvl--kaitse { color: #a86b0c; }

.mp-or-results { margin-top: 28px; scroll-margin-top: 100px; }
.mp-or-res { display: none; animation: mpOrIn .35s ease; }
@keyframes mpOrIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mp-or-res__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; padding: 22px 24px; border-radius: 16px; background: var(--or-bg); border-left: 5px solid var(--or-accent); margin-bottom: 22px; }
.mp-or-res__head--keskmine { border-left-color: var(--or-keskmine); }
.mp-or-res__head--tugev { border-left-color: var(--or-tugev); }
.mp-or-res__head--kaitse { border-left-color: var(--or-kaitse); }
.mp-or-res__head > div { flex: 1 1 380px; }
.mp-or-res__head p { margin: 0; color: var(--or-ink-2); max-width: 70ch; }
.mp-or-res__kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--or-ink-2); margin-bottom: 4px; }
.mp-or.mp-or .mp-or-res__head h3 { font-size: 24px; display: flex; align-items: center; }
.mp-or-res__all { font-weight: 700; color: var(--or-brand) !important; white-space: nowrap; }
.mp-or-empty { color: var(--or-ink-2); }

.mp-or-levels { margin: 56px 0 24px; padding: 32px 28px; border-radius: 18px; background: var(--or-bg); }
.mp-or.mp-or .mp-or-levels h2 { font-size: clamp(20px, 2.4vw, 26px); text-align: center; margin-bottom: 22px; }
.mp-or-levels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mp-or-level { background: #fff; border-radius: 14px; padding: 20px; border-top: 4px solid var(--or-kerge); }
.mp-or-level--keskmine { border-top-color: var(--or-keskmine); }
.mp-or-level--tugev { border-top-color: var(--or-tugev); }
.mp-or-level__name { display: flex; align-items: center; font-weight: 700; font-size: 18px; color: var(--or-brand); }
.mp-or-level p { color: var(--or-ink-2); font-size: 14.5px; margin: 8px 0 12px; }
.mp-or-level__links { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-or-level__links a { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--or-accent-l); color: var(--or-brand) !important; text-decoration: none; }
.mp-or-level__links a:hover { background: var(--or-accent); color: #fff !important; }
.mp-or-note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: 13.5px; color: var(--or-ink-2); }

@media (max-width: 768px) {
	.mp-or-areas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.mp-or-area { padding: 14px 6px; font-size: 14px; }
	.mp-or-area__ico { width: 42px; height: 42px; background-size: 24px; }
	.mp-or-levels { padding: 24px 16px; }
	.mp-or-levels__grid { grid-template-columns: 1fr; }
	.mp-or-res__head { padding: 18px; }
}