/* ============================================================
   ClickSambo — Service Providers page
   (/service-providers, /tr/hizmet-saglayicilari, /pt-br/prestadores-de-servicos)
   Scoped to <main class="spPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .spPage and every class carries the sp prefix, so the site-wide
   classes in layout.css (.btn, .hero, .card, section .inner, ...) cannot collide and the relative
   specificity of element vs. class rules matches the approved designs. The three language
   designs share the same markup and styles. The spTs* row classes are created by the hero
   stream script in Index.cshtml.
   ============================================================ */
.spPage{--font-brand:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --navy:#1C2841; --ink:#0F1420; --orange:#F94C10; --orange-bright:#FF3800; --orange-d:#D93D08; --orange-soft:rgba(249,76,16,.1); --green:#22B573; --green-d:#17835A; --green-soft:#E9F7F0; --cream:#FFF1E9; --cream-2:#FDF6F1; --white:#fff; --line:#ECECF3; --line-2:#F0E2D8; --muted:#51607A; --muted-2:#7C8AA3; --wrap:1120px; --r:20px; --r-sm:12px; --shadow:0 12px 40px rgba(28,40,65,.06); --shadow-lg:0 18px 50px rgba(28,40,65,.09);}
/* layout.css resets margins/paddings of most elements, sets `*{font-family:Mulish}`,
   `b,strong{font-weight:700}`, `ol,ul{list-style:none}` and styles every blockquote; restore the
   browser defaults the design relies on. :where() keeps these at element specificity, so every
   design rule below still wins exactly as in the design. */
.spPage *{font-family:inherit}
:where(.spPage) :where(p,dl,ul,ol){margin:1em 0}
:where(.spPage) :where(ul,ol){padding-left:40px}
:where(.spPage) ul{list-style:disc}
:where(.spPage) ol{list-style:decimal}
:where(.spPage) dd{margin-left:40px}
:where(.spPage) figure,:where(.spPage) blockquote{margin:1em 40px}
:where(.spPage) h1{margin:.67em 0}
:where(.spPage) h2{margin:.83em 0}
:where(.spPage) h3{margin:1em 0}
:where(.spPage) h4{margin:1.33em 0}
:where(.spPage) b,:where(.spPage) strong{font-weight:bolder}
.spPage *{box-sizing:border-box}
.spPage{margin:0; background:var(--cream); color:var(--navy); font-family:var(--font-brand); font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased;}
.spPage .spWrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.spPage h1,.spPage h2,.spPage h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.spPage h1{font-size:clamp(32px,4.2vw,48px); line-height:1.15}
.spPage h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.spPage h3{font-size:clamp(19px,1.6vw,21px); line-height:1.25; font-weight:800}
.spPage p{margin:0 0 1rem}
.spPage a{color:inherit}
.spPage .spMono{font-family:var(--font-mono)}
.spPage .spBtn{display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:#fff; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:10px; font-size:1rem; transition:background .15s ease, transform .15s ease, box-shadow .2s ease;}
.spPage .spBtn:hover{background:var(--orange-d); transform:translateY(-1px)}
.spPage .spBtn svg{width:17px;height:17px;flex:none}
.spPage .spBtn.spGhost{background:transparent; border:1.6px solid var(--navy); color:var(--navy)}
.spPage .spBtn.spGhost:hover{background:var(--navy); color:#fff}
.spPage .spHero{position:relative; overflow:hidden; padding:74px 0 84px; background: radial-gradient(760px 420px at 85% 0%, rgba(249,76,16,.09), transparent 62%), radial-gradient(620px 380px at 0% 100%, rgba(34,181,115,.08), transparent 60%), var(--cream);}
.spPage .spHero .spCols{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
.spPage .spHero p.spLead{color:var(--muted); font-size:17px; line-height:1.7; margin-top:20px; max-width:52ch}
.spPage .spHero .spActs{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}
.spPage .spFlow{display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; font-size:.92rem; color:var(--muted); align-items:center}
.spPage .spFlow b{color:var(--navy); font-weight:800}
.spPage .spFlow i{color:#C3B2A7; font-style:normal}
.spPage .spTrust{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:.88rem; color:var(--muted)}
.spPage .spTrust svg{width:18px;height:18px;color:var(--green-d);flex:none}
@media(max-width:940px){
  .spPage .spHero .spCols{grid-template-columns:1fr; gap:40px}
}
.spPage section{padding:84px 0}
.spPage section[id]{scroll-margin-top:86px}
.spPage section.spAlt{background:var(--white)}
.spPage .spHead{max-width:66ch; margin-bottom:40px}
.spPage .spHead p{color:var(--muted); margin-top:12px; font-size:15.5px; line-height:1.7}
.spPage .spGrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.spPage .spGrid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.spPage .spGrid4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:900px){
  .spPage .spGrid3,.spPage .spGrid2,.spPage .spGrid4{grid-template-columns:1fr}
}
.spPage .spCard{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow)}
.spPage .spAlt .spCard{background:var(--cream-2); box-shadow:none; border-color:var(--line-2)}
.spPage .spCard h3{margin-bottom:8px}
.spPage .spCard p{color:var(--muted); font-size:15.5px; line-height:1.7; margin:0}
.spPage .spChip{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--cream); color:var(--orange-bright); margin-bottom:18px;}
.spPage .spAlt .spChip{background:var(--cream)}
.spPage .spChip svg{width:27px;height:27px}
.spPage .spChip.spN{background:#EDF0F6; color:var(--navy)}
.spPage .spChip.spG{background:var(--green-soft); color:var(--green-d)}
.spPage .spFigure{margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px 22px; overflow:hidden; box-shadow:var(--shadow);}
.spPage .spAlt .spFigure{background:var(--cream-2); border-color:var(--line-2); box-shadow:none}
.spPage .spFigure svg{display:block; width:100%; height:auto}
.spPage .spFigure figcaption{margin-top:18px; font-size:.9rem; color:var(--muted); text-align:center}
.spPage .spConfig{background:var(--navy); border-radius:var(--r); padding:30px 32px; margin-top:8px; display:flex; gap:22px; align-items:flex-start}
.spPage .spConfig .spChip{background:rgba(255,255,255,.1); color:#FFB999; margin:0; flex:none}
.spPage .spConfig h3{color:#fff; margin-bottom:6px}
.spPage .spConfig p{color:#D3DCEB; margin:0; font-size:15.5px; line-height:1.7}
@media(max-width:700px){
  .spPage .spConfig{flex-direction:column}
}
.spPage .spNote{background:var(--cream); border:1px solid var(--line-2); border-radius:var(--r); padding:30px; display:flex; gap:22px; align-items:flex-start}
.spPage .spNote .spChip{margin:0; flex:none; background:#fff}
.spPage .spNote h3{color:var(--orange-d); margin-bottom:8px}
.spPage .spNote p{color:var(--muted); margin:0}
@media(max-width:700px){
  .spPage .spNote{flex-direction:column}
}
.spPage .spPrice{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:34px; box-shadow:var(--shadow)}
.spPage .spPrice .spAmt{font-size:3rem; font-weight:800; color:var(--orange); line-height:1}
.spPage .spPrice.spB .spAmt{color:var(--green-d)}
.spPage .spPrice .spAmt small{font-size:1rem; font-weight:700; color:var(--muted-2); margin-left:6px}
.spPage .spPrice h3{font-size:1rem; margin-bottom:14px; color:var(--muted)}
.spPage .spPrice p{color:var(--muted); font-size:.93rem; margin:14px 0 0}
.spPage .spBoth{margin-top:24px; background:var(--cream); border:1px solid var(--line-2); border-radius:var(--r); padding:26px 30px}
.spPage .spBoth strong{display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:16px}
.spPage .spIncl{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px}
@media(max-width:900px){
  .spPage .spIncl{grid-template-columns:1fr}
}
.spPage .spIncl li{color:var(--navy); font-size:.95rem; display:flex; gap:10px; align-items:flex-start; font-weight:600}
.spPage .spIncl li svg{width:18px;height:18px;flex:none;color:var(--green-d);margin-top:4px}
.spPage details{background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:20px 24px; margin-bottom:12px; box-shadow:var(--shadow)}
.spPage details[open]{border-color:var(--line-2)}
.spPage summary{font-weight:800; cursor:pointer; list-style:none; font-size:17px}
.spPage summary::-webkit-details-marker{display:none}
.spPage summary::after{content:"+"; float:right; color:var(--orange); font-weight:800}
.spPage details[open] summary::after{content:"–"}
.spPage details p{margin:12px 0 0; color:var(--muted); font-size:15.5px; line-height:1.7}
.spPage .spCta{background:var(--navy); border-radius:var(--r); padding:44px; display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap;}
.spPage .spCta h2{color:#fff; max-width:22ch}
.spPage .spCta p{color:#C3CEE1; margin:10px 0 0}
.spPage :focus-visible{outline:2px solid var(--orange); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .spPage *{transition:none !important; animation:none !important}
}
.spPage .spIntrocols{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;margin-bottom:36px}
@media(max-width:860px){
  .spPage .spIntrocols{grid-template-columns:1fr;gap:26px}
}
.spPage .spSerp{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow);max-width:560px}
.spPage .spSerpBar{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--muted);font-size:14px;margin-bottom:6px}
.spPage .spSerpBar svg{width:16px;height:16px;flex:none;color:var(--muted)}
.spPage .spSerpAd{padding:13px 0;border-top:1px solid var(--line-2)}
.spPage .spSerpAd.spYou{border-top:0;border-left:3px solid var(--orange);padding-left:13px;margin-left:-13px}
.spPage .spSerpAd .spLbl{font-size:11px;font-weight:800;color:var(--green-d)}
.spPage .spSerpAd .spDom{font-weight:800;color:var(--navy);font-size:13.5px;margin-top:2px}
.spPage .spSerpAd .spTtl{color:#1a56c4;font-size:16px;font-weight:700;margin-top:2px;line-height:1.25}
.spPage .spSerpAd .spSnip{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.spPage .spTagpill{display:inline-block;font-size:11px;font-weight:800;color:var(--orange-d);background:var(--cream);border:1px solid var(--orange-soft);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.spPage .spSerpCap{font-size:13px;color:var(--muted);margin-top:14px;max-width:560px;line-height:1.5}
.spPage .spDomchip{display:inline-block;font-family:var(--font-mono);font-size:11.5px;color:var(--orange-d);background:var(--cream);border:1px solid var(--orange-soft);border-radius:6px;padding:2px 7px;margin:2px 0 4px}
.spPage{font-size:16px; line-height:1.7}
.spPage p{font-size:16px; line-height:1.7}
.spPage .spLead{font-size:16px; line-height:1.7}
.spPage .spHead p{font-size:16px; line-height:1.7}
.spPage .spCard p{font-size:16px; line-height:1.7}
.spPage .spNote p{font-size:16px; line-height:1.7}
.spPage .spBoth p,.spPage details p{font-size:16px; line-height:1.7}
.spPage .spIncl li{font-size:16px; line-height:1.7}
.spPage .spReveal{opacity:0; transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1)}
.spPage .spReveal:not(.spIn){transform:translateY(18px)}
.spPage .spReveal.spIn{opacity:1}
.spPage .spGrid2 .spCard.spReveal:nth-child(2),.spPage .spGrid3 .spCard.spReveal:nth-child(2),.spPage .spGrid4 .spCard.spReveal:nth-child(2){transition-delay:.06s}
.spPage .spGrid3 .spCard.spReveal:nth-child(3),.spPage .spGrid4 .spCard.spReveal:nth-child(3){transition-delay:.12s}
.spPage .spGrid4 .spCard.spReveal:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion: reduce){
  .spPage .spReveal{opacity:1 !important; transition:none !important}
  .spPage .spReveal:not(.spIn){transform:none !important}
}
.spPage .spTstream{background:var(--navy); color:#fff; border-radius:var(--r); padding:20px; box-shadow:var(--shadow-lg)}
.spPage .spTsTop{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.spPage .spTsTitle{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:#dfe6f2}
.spPage .spTsDot{width:8px; height:8px; border-radius:50%; background:#22B573; animation:spTsBlink 1.6s ease-in-out infinite}
.spPage .spTsG{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#aeb9cd; background:rgba(255,255,255,.06); padding:3px 8px; border-radius:7px}
.spPage .spTsG svg{width:13px; height:13px}
.spPage .spTsFeed{display:flex; flex-direction:column; gap:8px}
.spPage .spTsRow{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-left:3px solid transparent; border-radius:11px; padding:10px 12px}
.spPage .spTsRow.spReal{border-left-color:#22B573}
.spPage .spTsRow.spFake{border-left-color:#FF3800}
.spPage .spTsMain{flex:1; min-width:0}
.spPage .spTsKw{font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spPage .spTsSrc{font-size:11.5px; color:#8fa0bd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.spPage .spTsVerdict{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; flex:none; padding:4px 9px; border-radius:999px; white-space:nowrap}
.spPage .spTsVerdict svg{width:13px; height:13px; flex:none}
.spPage .spTsRow.spReal .spTsVerdict{background:rgba(34,181,115,.16); color:#7ee0b4}
.spPage .spTsRow.spFake .spTsVerdict{background:rgba(255,56,0,.15); color:#ff9a7a}
.spPage .spTsRow.spNewest{animation:spTsEnter .5s cubic-bezier(.22,.61,.36,1)}
.spPage .spTsFoot{display:flex; gap:10px; margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.1)}
.spPage .spTsStat{flex:1; display:flex; align-items:center; gap:8px; font-size:11.5px; color:#aeb9cd; line-height:1.25}
.spPage .spTsStat svg{width:16px; height:16px; flex:none}
.spPage .spTsStat b{font-size:16px; font-weight:800; margin-right:1px}
.spPage .spTsStat.spReal b,.spPage .spTsStat.spReal svg{color:#7ee0b4}
.spPage .spTsStat.spFake b,.spPage .spTsStat.spFake svg{color:#ff9a7a}
@keyframes spTsEnter{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
@keyframes spTsBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
  .spPage .spTsDot{animation:none}
  .spPage .spTsRow.spNewest{animation:none}
}
.spPage .spReport{background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:24px 26px}
.spPage .spRepHead{display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--line-2)}
.spPage .spRepHead .spRepName{font-weight:800; color:var(--navy); font-size:15px}
.spPage .spRepTag{font-size:11px; font-weight:800; color:var(--green-d); background:var(--green-soft); border-radius:999px; padding:4px 11px}
.spPage .spRepList{list-style:none; margin:0; padding:0}
.spPage .spRepList li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); font-size:15px; color:var(--ink); font-weight:600}
.spPage .spRepList li svg{width:18px; height:18px; color:var(--green); flex:none}
.spPage .spRepList li.spMiss{color:var(--muted); font-weight:700}
.spPage .spRepMissing{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--orange-d); background:var(--cream); border:1px dashed var(--orange-soft); border-radius:999px; padding:4px 11px}
.spPage .spRepCap{margin:16px 0 0; font-size:15px; color:var(--muted); line-height:1.7}
.spPage .spRepCap b{color:var(--navy)}
.spPage .spRepList li .spLeadCh{display:inline-flex; align-items:center; gap:9px}
.spPage .spRepList li .spLeadCh svg{width:16px; height:16px; color:var(--muted); flex:none}
.spPage .spRepList li.spMiss .spLeadCh svg{color:var(--orange-d)}
.spPage .spRepWon{display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:var(--green-d); background:var(--green-soft); border-radius:999px; padding:4px 11px; white-space:nowrap}
.spPage .spRepStats{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 2px}
.spPage .spRepStat{flex:1; min-width:92px; background:var(--cream); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--muted); font-weight:700}
.spPage .spRepStat b{display:block; font-size:21px; color:var(--navy); font-weight:800; line-height:1.15}
.spPage .spRepStat.spWon b{color:var(--green-d)}
/* Deviations from the design, kept deliberately so nothing is pushed past the viewport:
   - the stream rows' nowrap keywords set the hero column's minimum width, so below ~400px the
     design pushes the stream card up to 8px past the viewport; letting the columns shrink keeps
     it inside (the rows already ellipsize);
   - in Portuguese the unbreakable domain chips ("floriculturahoje.example") widen the 4-column
     trade grid below ~1100px until the last column is cut off; for Portuguese only, and only
     below the 1120px where the container starts shrinking, the columns may shrink and a chip
     wraps only when it cannot fit its card (EN/TR fit as designed and stay untouched).
   Wherever the design already fits (every other language / width) these rules change nothing. */
.spPage .spHero .spCols>*{min-width:0}
@media(max-width:1119px){
  .spPage:lang(pt) .spGrid4>*{min-width:0}
  .spPage:lang(pt) .spDomchip{overflow-wrap:anywhere}
}