/* LumiSchema device extras: network checker, local price, spec tips, similar phones,
   report a mistake, star ratings, Phone Finder price, Compare share. */

/* ---------- Will it work in [country]? (collapsible) ---------- */
.ls-net { margin: 0 0 24px; background: #fff; border: 1px solid #e1e9f4; border-radius: 14px; box-shadow: 0 1px 3px rgba(11, 42, 82, .05); overflow: hidden; }
.ls-net-sum { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.ls-net-sum::-webkit-details-marker { display: none; }
.ls-net-sum:hover { background: #f6f9fe; }
.ls-net-sum:focus-visible { outline: 2px solid #0b5fd8; outline-offset: -2px; }
.ls-net-sum > .ls-ico { width: 30px; height: 30px; flex: 0 0 30px; }
.ls-net-sum-text { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ls-net-q { color: #071D33; font-size: 16px; font-weight: 800; line-height: 1.3; }
.ls-net-badge { padding: 3px 10px; border-radius: 999px; background: #f2f4f7; color: #4a5d7a; font-size: 12px; font-weight: 700; line-height: 1.4; }
.ls-net-badge.is-good { background: #e7f6ec; color: #0e7a3c; }
.ls-net-badge.is-ok { background: #fff6dd; color: #8a5a00; }
.ls-net-badge.is-bad { background: #fdecea; color: #b42318; }
.ls-net-chev { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: #4a5d7a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ls-net[open] .ls-net-chev { transform: rotate(180deg); }
.ls-net-card { padding: 4px 16px 14px; border-top: 1px solid #eef2f8; }
.ls-net-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; }
.ls-net-pick label { color: #4a5d7a; font-size: 12.5px; font-weight: 700; }
.ls-net-pick select, .ls-net-cmp-select { min-height: 34px; padding: 4px 30px 4px 10px; border: 1px solid #c3d3ea; border-radius: 8px; background-color: #f9fbff; color: #071D33; font-size: 13px; font-weight: 700; }
.ls-net-cmp-select { max-width: 100%; min-height: 30px; font-size: 12px; }
.ls-net-other { margin: 10px 0 0; color: #4a5d7a; font-size: 13px; line-height: 1.5; }
.ls-net-panel[hidden] { display: none; }
.ls-net-list { list-style: none; margin: 0; padding: 0; }
.ls-net-row { display: grid; grid-template-columns: 96px auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 9px 0; border-top: 1px solid #eef2f8; }
.ls-net-op { display: inline-flex; align-items: center; gap: 8px; color: #071D33; font-size: 14px; font-weight: 800; }
.ls-net-dot { width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; flex: 0 0 10px; }
.ls-net-row.is-good .ls-net-dot { background: #12a150; }
.ls-net-row.is-ok .ls-net-dot { background: #e0a100; }
.ls-net-row.is-limited .ls-net-dot, .ls-net-row.is-no .ls-net-dot { background: #d92d20; }
.ls-net-pills { display: inline-flex; gap: 4px; }
.ls-net-pill { display: inline-flex; align-items: center; gap: 3px; min-width: 42px; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: 11px; line-height: 1.3; background: #f2f4f7; color: #667085; }
.ls-net-pill b { font-weight: 800; }
.ls-net-pill i { font-style: normal; font-weight: 800; }
.ls-net-pill.is-yes { background: #e7f6ec; color: #0e7a3c; }
.ls-net-pill.is-part { background: #fff6dd; color: #8a5a00; }
.ls-net-pill.is-no { background: #fdecea; color: #b42318; }
.ls-net-note { color: #4a5d7a; font-size: 12.5px; line-height: 1.45; }
.ls-net-foot { margin: 10px 0 0; color: #667085; font-size: 11.5px; line-height: 1.5; }
@media (max-width: 640px) {
    .ls-net-row { grid-template-columns: auto minmax(0, 1fr); }
    .ls-net-pills { justify-self: end; }
    .ls-net-note { grid-column: 1 / -1; }
}

/* ---------- Local price (hero) ---------- */
.ls-lp { margin: 0 0 12px; padding: 10px 14px; background: #f6f9fe; border: 1px solid #d6e4fb; border-radius: 12px; }
.ls-lp-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ls-lp-label { color: #4a5d7a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ls-lp-price { color: #071D33; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px; }
.ls-lp-change { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ls-lp-change.is-down { background: #e7f6ec; color: #0e7a3c; }
.ls-lp-change.is-up { background: #fdecea; color: #b42318; }
.ls-lp-meta { margin: 2px 0 0; color: #667085; font-size: 11.5px; }
.ls-lp-old { color: #b54708; font-weight: 700; }
.ls-lp-hist { margin-top: 6px; }
.ls-lp-hist > summary { display: inline-flex; color: #0b5fd8; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.ls-lp-hist > summary::-webkit-details-marker { display: none; }
.ls-lp-hist > summary::after { content: '▾'; margin-left: 4px; }
.ls-lp-hist[open] > summary::after { content: '▴'; }
.ls-lp-spark { display: block; width: 100%; max-width: 320px; height: 56px; margin: 8px 0 4px; }
.ls-lp-hist ol { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; }
.ls-lp-hist li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px dashed #d6e4fb; color: #4a5d7a; font-size: 12px; max-width: 320px; }
.ls-lp-hist li b { color: #071D33; }

/* ---------- Spec tips ---------- */
.ls-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; min-height: 0; margin: 0 0 0 5px; padding: 0; border: 1px solid #b8cbe6; border-radius: 50%; background: #fff; color: #0b5fd8; font: italic 700 10px/1 Georgia, serif; vertical-align: 1px; cursor: help; box-shadow: none; }
.ls-tip:hover, .ls-tip:focus-visible, .ls-tip[aria-expanded="true"] { background: #0b5fd8; border-color: #0b5fd8; color: #fff; outline: none; }
.ls-tip-bubble { position: absolute; z-index: 100000; padding: 10px 12px; background: #071D33; color: #fff; border-radius: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; box-shadow: 0 10px 30px rgba(7, 29, 51, .28); box-sizing: border-box; }
.ls-tip-bubble[hidden] { display: none; }

/* ---------- Spec footer: disclaimer + report ---------- */
.ls-spec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ls-spec-foot .ls-spec-disclaimer { flex: 1 1 280px; margin-bottom: 0; }
.ls-report-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid #c3d3ea; border-radius: 8px; background: #fff; color: #071D33; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: none; }
.ls-report-btn svg { width: 15px; height: 15px; fill: none; stroke: #d92d20; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-report-btn:hover, .ls-report-btn:focus-visible { border-color: #0b5fd8; background: #fff; color: #0b5fd8; }
.ls-report { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(7, 29, 51, .3); }
.ls-report::backdrop { background: rgba(7, 29, 51, .55); }
.ls-report-form { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.ls-report-form h3 { margin: 0; color: #071D33; font-size: 19px; font-weight: 800; }
.ls-report-sub { margin: 0 0 6px; color: #4a5d7a; font-size: 13px; line-height: 1.5; }
.ls-report-form label { margin-top: 6px; color: #071D33; font-size: 13px; font-weight: 700; }
.ls-report-opt { color: #667085; font-weight: 500; }
.ls-report-form select, .ls-report-form textarea, .ls-report-form input[type="email"] { width: 100%; padding: 9px 11px; border: 1px solid #c3d3ea; border-radius: 8px; background: #f9fbff; color: #10233f; font: inherit; font-size: 14px; box-sizing: border-box; }
.ls-report-form select:focus, .ls-report-form textarea:focus, .ls-report-form input:focus { outline: none; border-color: #0b5fd8; background: #fff; box-shadow: 0 0 0 3px rgba(11, 95, 216, .15); }
.ls-report-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ls-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ls-report-send { min-height: 42px; padding: 0 20px; border: 0; border-radius: 8px; background: #071D33; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.ls-report-send:hover, .ls-report-send:focus-visible { background: #0b2a52; color: #fff; }
.ls-report-send:disabled { opacity: .6; cursor: wait; }
.ls-report-status { margin: 0; font-size: 13px; color: #4a5d7a; }
.ls-report-status.is-ok { color: #0e7a3c; font-weight: 700; }
.ls-report-status.is-err { color: #b42318; font-weight: 700; }
.ls-report-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #f2f4f7; color: #071D33; font-size: 20px; line-height: 1; cursor: pointer; }
.ls-report-x:hover, .ls-report-x:focus-visible { background: #e4e9f2; color: #071D33; }

/* ---------- Similar phones ---------- */
.ls-similar-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ls-similar-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e9f4; border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.ls-similar-card:hover { border-color: #0b5fd8; }
.ls-similar-link { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 8px; color: #071D33; text-align: center; text-decoration: none; }
.ls-similar-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; }
.ls-similar-img img { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.ls-similar-img .ls-ico, .ls-similar-img .ls-cmp-noimg svg { width: 44px; height: 44px; }
.ls-similar-link strong { font-size: 13px; line-height: 1.3; font-weight: 800; }
.ls-similar-link small { color: #4a5d7a; font-size: 12px; font-weight: 600; }
.ls-similar-cmp { display: block; padding: 7px; border-top: 1px solid #eef2f8; background: #f6f9fe; color: #0b5fd8; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
.ls-similar-cmp:hover { background: #0b5fd8; color: #fff; }
@media (max-width: 760px) { .ls-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Stars ---------- */
.ls-stars { position: relative; display: inline-block; color: #d0d5dd; font-size: 16px; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: middle; }
.ls-stars .ls-stars-on { position: absolute; top: 0; left: 0; display: block; margin: 0; padding: 0; overflow: hidden; color: #f5a524; }
.ls-hero-meta .ls-rate-link, .ls-hero-meta .ls-rate-link span { white-space: nowrap; }
.ls-stars.is-small { font-size: 12px; }
.ls-rate-link { display: inline-flex; align-items: center; gap: 5px; color: #071D33; text-decoration: none; }
.ls-rate-link b { font-weight: 800; }
.ls-rate-link span { color: #667085; }
.ls-rate-link:hover span { color: #0b5fd8; }
.ls-op-owner { padding: 2px 7px; border-radius: 999px; background: #e7f6ec; color: #0e7a3c; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }

/* Rating summary (Opinions page) */
.ls-rate-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0 0 18px; padding: 14px 18px; background: #fff; border: 1px solid #e1e9f4; border-radius: 14px; }
.ls-rate-sum-big { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.ls-rate-sum-big strong { color: #071D33; font-size: 34px; font-weight: 800; line-height: 1; }
.ls-rate-sum-big small { color: #667085; font-size: 12px; }
.ls-rate-bars { flex: 1 1 220px; list-style: none; margin: 0; padding: 0; }
.ls-rate-bars li { display: grid; grid-template-columns: 28px 1fr 30px; align-items: center; gap: 8px; margin: 3px 0; color: #4a5d7a; font-size: 12px; }
.ls-rate-bars i { display: block; height: 8px; border-radius: 9px; background: #eef2f8; overflow: hidden; }
.ls-rate-bars i b { display: block; height: 100%; background: #f5a524; border-radius: 9px; }
.ls-rate-bars em { font-style: normal; text-align: right; }

/* Star picker in the Opinions form */
.ls-rate-field { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 0 12px; }
.ls-rate { margin: 0; padding: 0; border: 0; }
.ls-rate legend { float: left; margin: 0 10px 0 0; padding: 0; color: #071D33; font-size: 13px; font-weight: 700; line-height: 32px; }
.ls-rate-opt { color: #667085; font-weight: 500; }
.ls-rate-stars { display: inline-flex; flex-direction: row-reverse; }
.ls-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ls-rate .ls-rate-stars label { display: inline-block; margin: 0; padding: 0 2px; color: #d0d5dd; font-size: 28px; font-weight: 400; line-height: 32px; cursor: pointer; transition: color .1s; }
.ls-rate .ls-rate-stars label:hover, .ls-rate .ls-rate-stars label:hover ~ label, .ls-rate .ls-rate-stars input:checked ~ label { color: #f5a524; }
.ls-rate-stars input:focus-visible + label { outline: 2px solid #0b5fd8; outline-offset: 2px; border-radius: 4px; }
.ls-rate-field .ls-owner-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #4a5d7a; font-size: 13px; font-weight: 600; }
.ls-owner-check input { width: 16px; height: 16px; }
.ls-op-list #respond .ls-rate-field { display: none; } /* replies never carry a rating */

/* ---------- Phone Finder ---------- */
.ls-pf-lp { margin: -2px 0 8px; color: #071D33; font-size: 14px; font-weight: 800; text-align: center; }

/* ---------- Compare: share ---------- */
.ls-cmp-tool-btn .ls-share-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ls-cmp-tool-btn .ls-wa-ico { width: 16px; height: 16px; fill: #25d366; }

/* Local price: several versions */
.ls-lp-price small { color: #4a5d7a; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.ls-lp-vars { list-style: none; margin: 8px 0 4px; padding: 0; border-top: 1px solid #d6e4fb; }
.ls-lp-vars li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px dashed #d6e4fb; font-size: 13px; color: #26384f; }
.ls-lp-vars li > span:first-child { flex: 1 1 auto; font-weight: 600; }
.ls-lp-vars li b { color: #071D33; font-weight: 800; }
.ls-lp-vars .ls-lp-change { font-size: 11px; }
.ls-lp-hist-name { margin: 10px 0 0; color: #071D33; font-size: 12px; font-weight: 800; }
