/* All colors inherit the seller's live palette, mode and UI treatment. */
.msc { --msc-radius:16px; --msc-link:var(--shop-role-link,var(--shop-primary,#087f5b)); color:var(--shop-text,#17231f); font:inherit; }
.msc [hidden] { display:none !important; }
.msc *, .msc *::before, .msc *::after { box-sizing:border-box; }
.msc button,.msc input,.msc textarea { font:inherit; }
.msc button { cursor:pointer; }
.msc button:disabled { cursor:wait; opacity:.65; }
.msc-launch { position:fixed; inset-inline-start:24px; inset-block-end:24px; z-index:985; display:flex; align-items:center; gap:10px; min-block-size:52px; padding:12px 18px; border:1px solid var(--shop-primary,#087f5b); border-radius:var(--msc-radius); color:var(--shop-on-primary,#fff); background:var(--shop-primary,#087f5b); box-shadow:var(--shop-shadow-md,0 8px 30px #12302726); line-height:1.5; font-weight:700; font-size:14px; }
.msc-launch i { font-size:23px; }
.msc-sheet { position:fixed; inset: auto; inset-inline-start:24px; inset-block-end:24px; margin:0; padding:26px; inline-size:min(460px,calc(100vw - 48px)); max-inline-size:none; max-block-size:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--shop-line,#dfe5e2); border-radius:var(--msc-radius); color:var(--shop-text,#17231f); background:var(--shop-surface,#fff); box-shadow:0 24px 80px #0004; direction:rtl; font:inherit; line-height:1.8; }
.msc-sheet::backdrop { background:rgb(12 26 21 / .48); }
.msc-sheet[open] { animation:msc-enter .2s ease-out; }
.msc-heading { display:flex; align-items:center; gap:12px; position:sticky; inset-block-start:-26px; z-index:2; background:var(--shop-surface,#fff); margin:-26px -26px 0; padding:20px 26px 12px; }
.msc-heading__icon { display:grid; place-items:center; inline-size:48px; block-size:48px; flex-shrink:0; border-radius:12px; background:var(--shop-primary-soft,#e6f2ec); color:var(--msc-link); font-size:25px; }
.msc-heading > div { min-inline-size:0; flex:1; }
.msc-heading p { margin:0; color:var(--shop-muted,#60716b); font-size:12px; overflow-wrap:anywhere; }
.msc h2 { margin:0; font-size:21px; color:inherit; line-height:1.65; }
.msc h3 { font-size:18px; line-height:1.8; margin:18px 0 8px; color:inherit; }
.msc-icon-button { display:grid; place-items:center; inline-size:44px; block-size:44px; flex-shrink:0; padding:0; border:1px solid var(--shop-line,#dfe5e2); border-radius:10px; color:inherit; background:var(--shop-surface-2,#fafbfa); font-size:24px !important; }
.msc-intro { font-size:14px; margin:15px 0; color:var(--shop-muted,#60716b); }
.msc-steps { display:flex; gap:20px; border-block-end:1px solid var(--shop-line,#dfe5e2); font-size:12px; color:var(--shop-muted,#60716b); }
.msc-steps span { padding-block:10px; }
.msc-steps [aria-current] { color:var(--msc-link); border-block-end:2px solid currentColor; font-weight:800; }
.msc-help,.msc-footnote { font-size:12px; color:var(--shop-muted,#60716b); line-height:1.9; margin:8px 0 14px; }
.msc-footnote { text-align:center; margin-block-end:0; }
.msc-status { color:var(--shop-error-text,#be123c); background:var(--shop-error-bg,#fff1f2); padding:10px 12px; border-radius:8px; font-size:13px; margin:12px 0; }
.msc-status:empty { display:none; }
.msc-puzzle { position:relative; inline-size:100%; margin:16px auto 10px; aspect-ratio:2/1; overflow:hidden; border-radius:12px; direction:ltr; background:var(--shop-surface-2,#fafbfa); box-shadow:inset 0 0 0 1px var(--shop-line,#dfe5e2); }
.msc-puzzle > img:first-child { inline-size:100%; block-size:100%; display:block; }
.msc-puzzle img:not([src]) { visibility:hidden; }
.msc-puzzle .msc-puzzle__piece { position:absolute; top:30%; left:2.5%; inline-size:20%; block-size:40%; max-inline-size:none; filter:drop-shadow(0 2px 3px #0009); pointer-events:none; }
.msc .msc-slider-label { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; margin:12px 0 4px; color:var(--msc-link); }
.msc input[type=range] { appearance:none; -webkit-appearance:none; display:block; inline-size:100%; margin:0 auto; block-size:44px; padding:0; background:transparent; cursor:ew-resize; }
.msc input[type=range]::-webkit-slider-runnable-track { block-size:10px; border-radius:20px; background:linear-gradient(to right,var(--shop-primary,#087f5b) var(--msc-progress,0%),var(--shop-line,#dfe5e2) var(--msc-progress,0%)); }
.msc input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; inline-size:48px; block-size:36px; margin-top:-13px; border:3px solid var(--shop-surface,#fff); border-radius:12px; background:var(--shop-primary,#087f5b); box-shadow:0 2px 8px #0003; }
.msc input[type=range]::-moz-range-track { block-size:10px; border-radius:20px; background:var(--shop-line,#dfe5e2); }
.msc input[type=range]::-moz-range-progress { block-size:10px; border-radius:20px; background:var(--shop-primary,#087f5b); }
.msc input[type=range]::-moz-range-thumb { inline-size:42px; block-size:30px; border:3px solid var(--shop-surface,#fff); border-radius:12px; background:var(--shop-primary,#087f5b); box-shadow:0 2px 8px #0003; }
.msc input:not([type=range]):not([type=checkbox]),.msc textarea { display:block; inline-size:100%; border:1px solid var(--shop-line-strong,#b7c9c1); border-radius:10px; padding:11px 12px; min-block-size:46px; font-size:16px; color:var(--shop-text,#17231f); background:var(--shop-surface-2,#fafbfa); box-shadow:none; }
.msc input::placeholder,.msc textarea::placeholder { color:var(--shop-muted,#60716b); opacity:1; font-size:13px; }
.msc textarea { resize:vertical; max-block-size:280px; }
.msc label { display:block; font-size:13px; font-weight:700; margin-block-end:6px; }
.msc label > span:not(.msc-consent span) { color:var(--shop-muted,#60716b); font-size:11px; font-weight:400; }
.msc-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.msc-field { margin-block-end:14px; min-inline-size:0; }
.msc-file-control { display:flex; gap:12px; align-items:center; border:1px dashed var(--shop-line-strong,#b7c9c1); padding:8px; border-radius:10px; min-inline-size:0; }
.msc-file-control:focus-within { outline:3px solid var(--msc-link); outline-offset:3px; }
.msc-file-pick { display:flex !important; align-items:center; min-block-size:44px; padding:8px 12px; margin:0 !important; white-space:nowrap; background:var(--shop-primary-soft,#e6f2ec); border-radius:6px; color:var(--shop-text,#17231f); cursor:pointer; }
.msc [data-msc-filename] { font-size:12px; color:var(--shop-muted,#60716b); overflow-wrap:anywhere; min-inline-size:0; }
.msc-secondary-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px; }
.msc-secondary-actions button,.msc [data-msc-remove] { min-block-size:44px; padding:5px 2px; border:0; color:var(--msc-link); background:transparent; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.msc-primary { display:flex; justify-content:center; align-items:center; gap:10px; inline-size:100%; min-block-size:50px; padding:10px 18px; border:1px solid transparent; border-radius:10px; background:var(--shop-primary,#087f5b); color:var(--shop-on-primary,#fff); font-size:14px; font-weight:800; line-height:1.8; }
.msc-primary:hover:not(:disabled),.msc-launch:hover { filter:brightness(.96); }
.msc-primary:active:not(:disabled),.msc-launch:active { transform:translateY(1px); }
.msc :is(button,a,input,textarea):focus-visible { outline:3px solid var(--msc-link); outline-offset:3px; }
.msc [aria-invalid=true] { border-color:var(--shop-error-text,#be123c) !important; }
.msc [data-msc-error] { display:block; color:var(--shop-error-text,#be123c); font-size:12px; }
.msc [data-msc-error]:empty { display:none; }
.msc-verified { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--msc-link); margin:16px 0; }
.msc-consent { display:flex !important; gap:10px; align-items:flex-start; font-weight:400 !important; cursor:pointer; min-block-size:44px; }
.msc-consent input { inline-size:20px; block-size:20px; flex-shrink:0; margin-block-start:3px; accent-color:var(--shop-primary,#087f5b); }
.msc-success { text-align:center; padding:22px 4px 6px; }
.msc-success > span { display:grid; place-items:center; inline-size:70px; block-size:70px; margin:auto; border-radius:50%; background:var(--shop-primary-soft,#e6f2ec); color:var(--msc-link); font-size:40px; }
.msc-success p { font-size:14px; }
.msc-reference { padding:10px; background:var(--shop-surface-2,#fafbfa); border:1px dashed var(--shop-line,#dfe5e2); border-radius:8px; }
.msc-trap,.msc-visually-hidden { position:absolute !important; inline-size:1px !important; block-size:1px !important; overflow:hidden !important; clip-path:inset(50%); white-space:nowrap; }
html.msc-open,html.msc-open body.mlmg-public-shop.mlmg-dk-storefront { overflow:hidden !important; }
body:is(.shop-cart-open,.shop-modal-open,.shop-appearance-open,.dk-filter-open,.shop-cart-switch-open) .msc-launch { visibility:hidden; }
html[data-shop-ui=minimal] .msc { --msc-radius:8px; }
html[data-shop-mode-resolved=dark] .msc { --msc-link:color-mix(in srgb,var(--shop-primary,#087f5b) 62%,var(--shop-text,#f3f6f5) 38%); }
html[data-shop-ui=minimal] .msc-launch { box-shadow:none; }
html[data-shop-ui=glass] .msc-sheet { background:color-mix(in srgb,var(--shop-surface,#fff) 94%,transparent); backdrop-filter:blur(16px); }
@media(max-width:900px) { .msc-launch { inset-inline-start:16px; inset-block-end:calc(86px + env(safe-area-inset-bottom,0px)); min-block-size:48px; padding:10px 14px; } }
@media(max-width:600px) { .msc-sheet { inset-inline:0; inset-block-end:0; inline-size:100%; max-block-size:92dvh; padding:22px 20px max(22px,env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; border-block-end:0; } .msc-heading { inset-block-start:-22px; margin:-22px -20px 0; padding:16px 20px 12px; } .msc-fields { grid-template-columns:1fr; gap:0; } .msc h2 { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { .msc-sheet[open] { animation:none; } .msc * { scroll-behavior:auto; transition:none; } }
@media(prefers-reduced-transparency:reduce) { html[data-shop-ui=glass] .msc-sheet { background:var(--shop-surface,#fff); backdrop-filter:none; } }
@keyframes msc-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
