/*
 * Shoponlina real-price calculator. Loaded only on posts that use [so_cost_calc] (body class so-cost-calc).
 *
 * Every rule starts with ".so-cost-calc .so-calc" (0,2,0 or more, and most are 0,3,0). That outranks the theme's
 * article, list, link and RTL rules (at most 0,2,2) without !important. Class names are so-calc__*: the size
 * tools use bare names like .so-field and .so-seg, so the two never meet. Logical properties only, for ar and he.
 * The form is built by calc.js inside .so-calc__app. Until then, and if the script fails, the page shows
 * .so-calc__static: the plain summary the server prints.
 */

.so-cost-calc .so-calc {
    --so-calc-navy: #0a1628; --so-calc-navy-2: #162a4a; --so-calc-ink: #1a202c; --so-calc-muted: #5d6879;
    --so-calc-orange: #e8920d; --so-calc-deep: #a35f00; --so-calc-wash: #fdf2e0; --so-calc-paper: #fff; --so-calc-mist: #eef1f5;
    --so-calc-line: rgba(10, 22, 40, .10); --so-calc-strong: rgba(10, 22, 40, .22); --so-calc-rule: rgba(163, 95, 0, .2);
    --so-calc-on-navy: #fff; --so-calc-on-navy-muted: rgba(255, 255, 255, .76);
    --so-calc-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --so-calc-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --so-calc-tr: 1;
    container: so-calc / inline-size;
    display: block;
    margin: 28px 0 8px;
    padding: 0;
    border: 1px solid var(--so-calc-line);
    border-radius: 18px;
    background: var(--so-calc-paper);
    overflow: hidden;
    overflow: clip;
    box-shadow: 0 1px 2px rgba(10, 22, 40, .05), 0 18px 40px -22px rgba(10, 22, 40, .35);
    font: 400 16px/1.5 var(--so-calc-ui);
    color: var(--so-calc-ink);
    text-align: start;
    letter-spacing: normal;
}
.so-cost-calc .so-calc:lang(ar) { --so-calc-ui: 'Tajawal', 'Inter', system-ui, sans-serif; --so-calc-display: 'Amiri', 'Playfair Display', Georgia, serif; --so-calc-tr: 0; }
.so-cost-calc .so-calc:lang(he) { --so-calc-ui: 'Heebo', 'Inter', system-ui, sans-serif; --so-calc-display: 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif; --so-calc-tr: 0; }
.so-cost-calc .so-calc:is(:lang(ru), :lang(bg)) { --so-calc-ui: 'Nunito Sans', 'Inter', system-ui, sans-serif; --so-calc-display: 'Cormorant Garamond', Georgia, serif; }
.so-cost-calc .so-calc:is(:lang(fr), :lang(es), :lang(it)) { --so-calc-display: 'Cormorant Garamond', Georgia, serif; }
.so-cost-calc .so-calc:is(:lang(cs), :lang(pl), :lang(ro)) { --so-calc-ui: 'Source Sans 3', 'Inter', system-ui, sans-serif; --so-calc-display: 'Libre Baskerville', Georgia, serif; }

.so-cost-calc .so-calc [hidden] { display: none !important; }

/* ---------- Head ---------- */

.so-cost-calc .so-calc .so-calc__head { padding: 20px 22px 16px; background: var(--so-calc-navy); color: var(--so-calc-on-navy); }
.so-cost-calc .so-calc .so-calc__title { margin: 0; padding: 0; border: 0; font: 700 24px/1.2 var(--so-calc-display); font-size: clamp(21px, 5.2cqi, 26px); letter-spacing: normal; text-transform: none; text-align: start; color: var(--so-calc-on-navy); }
.so-cost-calc .so-calc .so-calc__sub { margin: 6px 0 0; padding: 0; max-width: 75ch; text-wrap: balance; font-size: 14.5px; line-height: 1.5; color: var(--so-calc-on-navy-muted); }
.so-cost-calc .so-calc .so-calc__body { display: block; padding: 20px 22px 22px; }

/* ---------- The plain summary (no script, or the script failed) ---------- */

.so-cost-calc .so-calc .so-calc__facts { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.so-cost-calc .so-calc .so-calc__facts li { margin: 0; padding: 0 0 0 0; padding-inline-start: 16px; position: relative; font-size: 15px; line-height: 1.55; }
.so-cost-calc .so-calc .so-calc__facts li::before { content: ""; position: absolute; inset-block-start: .65em; inset-inline-start: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--so-calc-orange); }
.so-cost-calc .so-calc .so-calc__nojs { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__meta { font-size: 12.5px; line-height: 1.4; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__meta a { color: var(--so-calc-deep); text-decoration: underline; text-underline-offset: 2px; }
.so-cost-calc .so-calc .so-calc__meta a:is(:hover, :focus) { color: var(--so-calc-navy); }

/* ---------- The form. Its space is reserved from the first paint (html.so-calc-js is set in the head). ----------
 * The form is built by script, so until then the page holds --so-calc-h for it. The height depends on what the
 * form shows, which the server prints as data-shape (eu, fx = an EU country with its own currency, ch, gb), and on
 * the width of the box, so there is one value per shape and width step (see the steps below; A, B, C, D, E).
 * The values are the tallest of the languages with strings (en, de, fr, nl, it; ar shows English) in headless
 * Chrome at 300 to 768 px with system fonts, plus a few pixels. Too much space shows as a little empty room under the
 * form; too little would push the text below it down. The hold ends with the reader's first change
 * (.is-touched), because after that the form's height is their doing and a short form must not keep a tall gap. */

.so-cost-calc .so-calc .so-calc__app { display: none; }
html.so-calc-js .so-cost-calc .so-calc:not(.is-static) .so-calc__static { display: none; }
html.so-calc-js .so-cost-calc .so-calc:not(.is-static) .so-calc__app { position: relative; display: grid; gap: 16px; align-content: start; }
html.so-calc-js .so-cost-calc .so-calc:not(.is-static):not(.is-touched) .so-calc__app { min-height: var(--so-calc-h, 672px); }
/* A: narrower than 310px */
.so-cost-calc .so-calc .so-calc__app { --so-calc-h: 672px; }
.so-cost-calc .so-calc[data-shape="fx"] .so-calc__app { --so-calc-h: 720px; }
.so-cost-calc .so-calc[data-shape="ch"] .so-calc__app { --so-calc-h: 545px; }
.so-cost-calc .so-calc[data-shape="gb"] .so-calc__app { --so-calc-h: 320px; }

.so-cost-calc .so-calc .so-calc__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.so-cost-calc .so-calc .so-calc__field { display: grid; gap: 7px; align-content: start; min-width: 0; margin: 0; padding: 0; }
.so-cost-calc .so-calc :is(.is-country, .is-origin, .is-kinds, .is-seller, .is-duty, .so-calc__cur) { grid-column: 1 / -1; }
.so-cost-calc .so-calc .so-calc__lbl { display: block; margin: 0; padding: 0; font: 600 13px/1.3 var(--so-calc-ui); letter-spacing: normal; text-transform: none; color: var(--so-calc-ink); }
.so-cost-calc .so-calc .so-calc__help { font-size: 12.5px; line-height: 1.4; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__cur { margin: -4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--so-calc-muted); }
.so-cost-calc .so-calc:is(:lang(ar), :lang(he)) :is(.so-calc__lbl, .so-calc__help, .so-calc__cur) { font-size: 14px; }

.so-cost-calc .so-calc select,
.so-cost-calc .so-calc .so-calc__box { box-sizing: border-box; width: 100%; max-width: none; min-height: 46px; margin: 0; border: 1px solid var(--so-calc-strong); border-radius: 11px; background-color: var(--so-calc-paper); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.so-cost-calc .so-calc select { display: block; padding: 0 38px 0 12px; padding-inline: 12px 38px; height: 46px; font: 600 16px/1.2 var(--so-calc-ui); color: var(--so-calc-ink); text-transform: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6879' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 16px 16px; background-position: calc(100% - 13px) center; }
html[dir=rtl] .so-cost-calc .so-calc select { background-position: 13px center; }
.so-cost-calc .so-calc select:is(:hover, :focus) { border-color: var(--so-calc-navy); color: var(--so-calc-ink); box-shadow: none; }
.so-cost-calc .so-calc select:focus-visible { outline: 2px solid var(--so-calc-orange); outline-offset: 2px; }

.so-cost-calc .so-calc .so-calc__box { display: flex; align-items: center; gap: 8px; padding-inline: 12px; }
.so-cost-calc .so-calc .so-calc__box:focus-within { border-color: var(--so-calc-navy); box-shadow: 0 0 0 3px rgba(10, 22, 40, .12); }
.so-cost-calc .so-calc .so-calc__box input { flex: 1 1 auto; box-sizing: border-box; width: 100%; min-width: 0; max-width: none; height: auto; margin: 0; padding: 12px 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font: 600 16px/1.2 var(--so-calc-ui); text-align: start; color: var(--so-calc-ink); font-variant-numeric: tabular-nums; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.so-cost-calc .so-calc .so-calc__box input:focus { border: 0; outline: 0; box-shadow: none; color: var(--so-calc-ink); }
.so-cost-calc .so-calc .so-calc__box input::placeholder { color: #8491a7; font-weight: 500; opacity: 1; }
.so-cost-calc .so-calc .so-calc__unit { flex: none; font: 600 12.5px/1 var(--so-calc-ui); color: var(--so-calc-muted); }

/* Radio groups drawn as segments. The real input covers its label, so the whole segment is the target. */
.so-cost-calc .so-calc .so-calc__seg { display: flex; flex-wrap: wrap; gap: 4px; min-height: 46px; padding: 4px; border-radius: 12px; background: var(--so-calc-mist); }
.so-cost-calc .so-calc .so-calc__seg label { position: relative; display: block; flex: 1 1 0; min-width: max-content; margin: 0; padding: 0; cursor: pointer; }
.so-cost-calc .so-calc .so-calc__seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.so-cost-calc .so-calc .so-calc__seg span { display: block; padding: 9px 12px; border-radius: 9px; text-align: center; white-space: nowrap; font: 600 14px/1.25 var(--so-calc-ui); color: var(--so-calc-muted); transition: background-color .15s, color .15s; }
.so-cost-calc .so-calc .so-calc__seg label:hover span { color: var(--so-calc-navy); }
.so-cost-calc .so-calc .so-calc__seg input:checked + span { background: var(--so-calc-paper); color: var(--so-calc-navy); box-shadow: 0 1px 2px rgba(10, 22, 40, .14), 0 0 0 1px var(--so-calc-line); }
.so-cost-calc .so-calc .so-calc__seg input:focus-visible + span { outline: 2px solid var(--so-calc-orange); outline-offset: 2px; }

/* ---------- The result ---------- */

.so-cost-calc .so-calc .so-calc__result { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px 18px; border-radius: 14px; background: var(--so-calc-wash); }
.so-cost-calc .so-calc .so-calc__hint { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__lines { display: block; margin: 0; padding: 0; list-style: none; }
.so-cost-calc .so-calc .so-calc__line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--so-calc-rule); font-size: 15px; line-height: 1.4; }
.so-cost-calc .so-calc .so-calc__line:first-child { padding-block-start: 0; }
.so-cost-calc .so-calc .so-calc__what { min-width: 0; }
.so-cost-calc .so-calc .so-calc__name { font-weight: 600; }
.so-cost-calc .so-calc .so-calc__line.is-open .so-calc__name { font-weight: 500; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__line .so-calc__meta { display: block; margin-block-start: 1px; }
.so-cost-calc .so-calc .so-calc__amt { flex: none; direction: ltr; unicode-bidi: isolate; text-align: end; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.so-cost-calc .so-calc .so-calc__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block-start: 2px; }
.so-cost-calc .so-calc .so-calc__tl { font: 700 13px/1.3 var(--so-calc-ui); letter-spacing: calc(.06em * var(--so-calc-tr)); text-transform: uppercase; color: var(--so-calc-deep); }
.so-cost-calc .so-calc .so-calc__sum { direction: ltr; unicode-bidi: isolate; font: 800 32px/1.1 var(--so-calc-display); font-size: clamp(24px, 7.2cqi, 34px); letter-spacing: -.01em; color: var(--so-calc-navy); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.so-cost-calc .so-calc .so-calc__notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; }
.so-cost-calc .so-calc .so-calc__notes li { position: relative; margin: 0; padding: 0 0 0 0; padding-inline-start: 16px; }
.so-cost-calc .so-calc .so-calc__notes li::before { content: ""; position: absolute; inset-block-start: .6em; inset-inline-start: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--so-calc-orange); }
.so-cost-calc .so-calc .so-calc__notes li.is-flag { font-weight: 600; color: var(--so-calc-deep); }
.so-cost-calc .so-calc .so-calc__foot { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--so-calc-muted); }
.so-cost-calc .so-calc .so-calc__sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so-cost-calc .so-calc:is(:lang(ar), :lang(he)) :is(.so-calc__tl, .so-calc__foot, .so-calc__meta) { font-size: 14px; }

/* ---------- Container widths ---------- */

@container so-calc (max-width: 400px) {
    .so-cost-calc .so-calc .so-calc__head { padding: 18px 16px 14px; }
    .so-cost-calc .so-calc .so-calc__body { padding: 16px 16px 18px; }
    .so-cost-calc .so-calc .so-calc__result { padding: 14px 14px; }
}
/* B: 310px up */
@container so-calc (min-width: 310px) {
    .so-cost-calc .so-calc .so-calc__app { --so-calc-h: 635px; }
    .so-cost-calc .so-calc[data-shape="fx"] .so-calc__app { --so-calc-h: 682px; }
    .so-cost-calc .so-calc[data-shape="ch"] .so-calc__app { --so-calc-h: 545px; }
    .so-cost-calc .so-calc[data-shape="gb"] .so-calc__app { --so-calc-h: 320px; }
}
/* C: 350px up */
@container so-calc (min-width: 350px) {
    .so-cost-calc .so-calc .so-calc__app { --so-calc-h: 615px; }
    .so-cost-calc .so-calc[data-shape="fx"] .so-calc__app { --so-calc-h: 662px; }
    .so-cost-calc .so-calc[data-shape="ch"] .so-calc__app { --so-calc-h: 495px; }
    .so-cost-calc .so-calc[data-shape="gb"] .so-calc__app { --so-calc-h: 300px; }
}
/* D: 401px up */
@container so-calc (min-width: 401px) {
    .so-cost-calc .so-calc .so-calc__app { --so-calc-h: 585px; }
    .so-cost-calc .so-calc[data-shape="fx"] .so-calc__app { --so-calc-h: 632px; }
    .so-cost-calc .so-calc[data-shape="ch"] .so-calc__app { --so-calc-h: 492px; }
    .so-cost-calc .so-calc[data-shape="gb"] .so-calc__app { --so-calc-h: 302px; }
}
/* E: 560px up, where the fields sit two to a row */
@container so-calc (min-width: 560px) {
    .so-cost-calc .so-calc .so-calc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-cost-calc .so-calc :is(.is-country, .is-origin, .is-kinds, .is-seller, .is-duty) { grid-column: auto; }
    .so-cost-calc .so-calc .so-calc__app { --so-calc-h: 447px; }
    .so-cost-calc .so-calc[data-shape="fx"] .so-calc__app { --so-calc-h: 477px; }
    .so-cost-calc .so-calc[data-shape="ch"] .so-calc__app { --so-calc-h: 422px; }
    .so-cost-calc .so-calc[data-shape="gb"] .so-calc__app { --so-calc-h: 282px; }
}

@media (prefers-reduced-motion: reduce) {
    .so-cost-calc .so-calc * { transition: none !important; }
}