/* Scrimpr eSIM Compare — tool + per-country/region pages.
   Everything scoped under #sec-app / .sec-page so it never clashes with the theme. */
#sec-app,.sec-page{
  --navy:#2C5282;--navy-d:#1e3a5f;--navy-l:#3a689e;--green:#16a34a;--green-d:#15803d;
  --ink:#1a202c;--muted:#64748b;--line:#e6e9ef;--bg:#f5f7fa;--card:#fff;
  --shadow:0 1px 2px rgba(16,30,54,.06),0 4px 16px rgba(16,30,54,.06);
  color:var(--ink);
}
#sec-app *,.sec-page *{box-sizing:border-box}
#sec-app svg,.sec-page svg{display:inline-block;vertical-align:middle}

/* tool hero */
#sec-app .sec-hero{padding:2px 0 6px;text-align:center;margin-bottom:8px}
#sec-app .searchbox{max-width:640px;margin:0 auto;position:relative}
#sec-app .searchbox input{width:100%;padding:15px 16px 15px 48px;font-size:16px;border:1.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);outline:3px solid transparent;background:#fff}
#sec-app .searchbox input:focus{outline-color:rgba(44,82,130,.22);border-color:var(--navy)}
#sec-app .searchbox .pin{position:absolute;left:16px;top:14px;color:var(--muted)}
#sec-app .sug{position:absolute;left:0;right:0;top:60px;background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;text-align:left;display:none;z-index:20}
#sec-app .sug div{padding:11px 16px;display:flex;gap:10px;align-items:center;color:var(--ink);cursor:pointer}
#sec-app .sug div:hover{background:var(--bg)}#sec-app .sug small{margin-left:auto;color:var(--muted)}

#sec-app .flag,.sec-page .flag{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(16,30,54,.08);flex:0 0 auto}
#sec-app .rmap-sm,.sec-page .rmap-sm{height:26px;width:auto;border-radius:4px;vertical-align:middle}

#sec-app .section-title{font-size:19px;font-weight:800;margin:26px 2px 12px;display:flex;align-items:center;gap:9px}
#sec-app .section-title svg{color:var(--navy)}
#sec-app .pop{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){#sec-app .pop{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){#sec-app .pop{grid-template-columns:repeat(4,1fr)}}
#sec-app .pop a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
#sec-app .pop a:hover{transform:translateY(-2px);border-color:var(--navy-l)}
#sec-app .pop .cn{font-weight:700;font-size:15px;margin-top:2px}
#sec-app .pop .fr{font-size:13px;color:var(--muted)}#sec-app .pop .fr b{color:var(--green);font-weight:700}
#sec-app .pop .rmap{height:46px;width:auto;object-fit:contain;align-self:flex-start}

/* results (shared with SEO pages via .sec-page) */
#sec-app .results-head,.sec-page .results-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:6px 2px 4px}
#sec-app .results-head h2{font-size:22px;margin:0;font-weight:800;display:flex;align-items:center;gap:10px}
#sec-app .controls{margin-left:auto;display:flex;gap:8px}
#sec-app .controls select,#sec-app .chip-toggle{font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
#sec-app .chip-toggle.on{background:#eaf7ef;border-color:var(--green);color:var(--green-d)}
#sec-app .back{display:inline-flex;align-items:center;gap:5px;color:var(--navy);font-weight:600;font-size:14px;margin:12px 2px 16px;cursor:pointer}
#sec-app .card,.sec-page .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-bottom:12px;position:relative}
#sec-app .card.best,.sec-page .card.best{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--shadow)}
#sec-app .plogo,.sec-page .plogo{width:54px;height:54px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:8px;flex:0 0 auto}
#sec-app .plogo img,.sec-page .plogo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
#sec-app .cmid .prov,.sec-page .cmid .prov{font-weight:700;font-size:15px}
#sec-app .cmid .meta,.sec-page .cmid .meta{color:var(--muted);font-size:13.5px;margin-top:2px}
#sec-app .cmid .meta b,.sec-page .cmid .meta b{color:var(--ink);font-weight:700}
#sec-app .cright,.sec-page .cright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#sec-app .price,.sec-page .price{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
#sec-app .perg,.sec-page .perg{font-size:12px;color:var(--muted)}
#sec-app .fxnote,.sec-page .fxnote{font-size:11px;color:#92600a;margin-top:3px;font-weight:600;white-space:nowrap;cursor:help}
#sec-app .perg.best,.sec-page .perg.best{color:var(--green-d);font-weight:700}
#sec-app .cta,.sec-page .cta{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;font-weight:700;font-size:13.5px;padding:10px 15px;border-radius:10px;white-space:nowrap;text-decoration:none}
#sec-app .cta:hover,.sec-page .cta:hover{background:var(--green-d)}
#sec-app .tag-best,.sec-page .tag-best{position:absolute;top:-9px;left:16px;background:var(--green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
#sec-app .note{color:var(--muted);font-size:13px;margin-top:20px}
#sec-app .muted{color:var(--muted);text-align:center;padding:28px 4px}
@media(max-width:600px){
  #sec-app .card,.sec-page .card{grid-template-columns:auto 1fr}
  #sec-app .cright,.sec-page .cright{grid-column:1/3;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px}
  #sec-app .cright .price-wrap,.sec-page .cright .price-wrap{text-align:left}
}
/* ---- faceted filter layout (tool results + country pages) ---- */
#sec-app .sec-layout{display:grid;grid-template-columns:264px 1fr;gap:22px;align-items:start;margin-top:6px}
#sec-app .sec-filters{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px 16px 18px;position:sticky;top:16px}
#sec-app .ff-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15.5px;color:var(--navy);padding:14px 2px 4px}
#sec-app .ff-head svg{color:var(--navy)}#sec-app .ff-head .x{display:none}
#sec-app .fsec{border-top:1px solid var(--line);padding:14px 0 4px}
#sec-app .fsec:first-of-type{border-top:0}
#sec-app .fsec h4{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#344054}
#sec-app .fsec select{width:100%;font:inherit;font-size:14px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
#sec-app .schecks{display:flex;flex-direction:column;gap:2px}
#sec-app .schk{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
#sec-app .schk small{margin-left:auto;color:var(--muted);font-weight:600}
#sec-app .schk input{appearance:none;width:18px;height:18px;border:1.5px solid #c7cfda;border-radius:5px;cursor:pointer;position:relative;flex:0 0 auto;transition:.12s}
#sec-app .schk input:checked{background:var(--green);border-color:var(--green)}
#sec-app .schk input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#sec-app .fclear{width:100%;margin-top:16px;font:inherit;font-weight:700;font-size:14px;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
#sec-app .fclear:hover{background:#f0f4fa}
#sec-app .sec-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#sec-app .sec-bar .count{font-size:15px;font-weight:700}#sec-app .sec-bar .count b{color:var(--navy)}
#sec-app .sec-bar .spacer{margin-left:auto}
#sec-app .sec-bar select{font:inherit;font-size:14px;font-weight:600;padding:10px 34px 10px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
#sec-app .filters-toggle{display:none}
#sec-app .fscrim{display:none}
@media(max-width:820px){
  #sec-app .sec-layout{grid-template-columns:1fr}
  #sec-app .filters-toggle{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:700;font-size:14px;padding:10px 15px;border-radius:10px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
  #sec-app .sec-filters{position:fixed;inset:0 auto 0 0;z-index:60;width:min(320px,86vw);border-radius:0;overflow:auto;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(16,30,54,.25)}
  #sec-app.filters-open .sec-filters{transform:none}
  #sec-app .ff-head .x{display:inline-flex;margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;font-size:16px}
  #sec-app.filters-open .fscrim{display:block;position:fixed;inset:0;background:rgba(16,30,54,.4);z-index:55}
}

/* per-country/region SEO page */
.sec-page .sec-crumb{color:var(--muted);font-size:13px;margin-bottom:6px}
.sec-page h1{letter-spacing:-.02em;margin:6px 0}
.sec-page .sec-intro{font-size:16px;margin:0 0 18px}
.sec-page .sec-faq{margin-top:30px}.sec-page .sec-faq h3{margin:16px 0 4px;font-size:16px}
.sec-page .sec-disclosure{color:var(--muted);font-size:13px}
.sec-page .sec-cross{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
