/* ============================================================
   Service Panel — SMSACTIVE
   The "Select service / Select rank / Select country" widget from the
   product page. Self-contained component: include this file +
   service-panel.js + brand-icons.js + the .service-panel markup
   wherever it should appear (it renders itself on load — no other
   wiring needed). Sits as a flex child inside a row alongside whatever
   main content follows it.
   ============================================================ */
:root{
  --blue-dark:#0f3d28;
  --blue-mid:#1f7a52;
  --blue-bright:#27935f;
  --accent-orange:#f39c1f;
}

.service-panel{
  flex:1 1 270px;
  max-width:290px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* The 290px cap above stops this from filling the row once .act-layout
   wraps and it ends up alone on its own line — left-aligned by default,
   that reads as a dead gap stuck on the right. The auto side margins
   center it instead, unconditionally: when it's side-by-side with
   .act-content, .act-content's flex-grow already claims all the
   leftover space on that line, so the margins have nothing left to
   absorb and this has no effect on the normal two-column layout. Doing
   it this way (rather than gating behind a max-width media query tuned
   to a guessed wrap point) keeps it correct regardless of exact
   viewport width or zoom level. */
/* Same green gradient as the header band, applied to the whole card so
   the body reads as one continuous green surface behind the search
   box/tile grid gutters. */
.service-card{
  background:linear-gradient(160deg, var(--blue-mid) 0%, var(--blue-dark) 70%, #eafaf2 100%);
  border-radius:18px;
  padding:0;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 26px -16px rgba(15,44,92,.4);
}
.step-row{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.step-badge{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  background:#fff;color:var(--blue-dark);
  display:flex;align-items:center;justify-content:center;
  font-weight:400;font-size:10.5px;
}
.step-row h2{margin:0;font-size:13.5px;font-weight:700;}

/* ---- Select-service card: search box + tile grid sit directly on a
   white body now, with a colored header band (step title) on top and a
   light mint footer band ("didn't find it?") on the bottom — instead of
   everything floating on one dark-green card. Scoped to .service-card
   specifically since .step-row/.search-wrap/.search-box are shared with
   .country-card below it, which keeps its original all-green look
   untouched. */
.service-card .step-row{
  margin:0;
  padding:16px 14px 14px;
  color:#fff;
}
/* White panel grouping the search box, tile grid, and the "didn't find
   it?" support line into one continuous surface, inset from the card's
   left/right edges so the green background shows as a frame on the
   sides (not flush edge-to-edge). overflow:hidden lets the support
   line's flat bottom edge pick up the panel's own corner radius instead
   of needing a matching radius set on it directly. */
.service-card .service-body{
  background:#fff;
  border-radius:16px;
  margin:0 10px 14px;
  padding:0;
  overflow:hidden;
}
.service-card .search-wrap{margin:12px 12px 10px;}
.service-card .search-box{
  background:#f5f7f7;
  border-color:rgba(15,44,92,.1);
}
.service-card .service-grid{margin:0 12px 10px;}
.service-card .support-line{
  background:#eafaf2;
  border-radius:0;
  border-top:1px solid rgba(15,44,92,.08);
  padding:12px 14px;
}
/* ============ COUNTRY CARD (step 2: select country) ============ */
.country-card{
  background:linear-gradient(160deg, var(--blue-mid) 0%, var(--blue-dark) 100%);
  border-radius:18px;
  padding:14px;
  color:#fff;
  display:flex;
  flex-direction:column;
}
.country-card .search-wrap{margin-bottom:8px;}
.country-hint{font-size:10.5px;opacity:.75;margin:0 0 10px 2px;}
.country-empty{padding:16px 8px;text-align:center;color:#fff;opacity:.75;font-size:12px;}
/* shows ~8 rows; countryList's max-height is set in JS to exactly N
   rows + gaps, so the rest of the list reveals by scrolling inside the
   card instead of a "view more" click. */
.country-list{
  display:flex;flex-direction:column;gap:8px;margin-bottom:2px;
  overflow-y:auto;overflow-x:hidden;
  padding-right:4px;margin-right:-4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;
}
.country-list::-webkit-scrollbar{width:5px;}
.country-list::-webkit-scrollbar-track{background:transparent;}
.country-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:999px;}
.country-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45);}
.country-row{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:background .18s ease, border-color .18s ease;
}
.country-row:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);}
.country-main{display:flex;align-items:center;gap:10px;}
.country-flag{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.25);}
.country-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.country-name{font-family:var(--font-heading);font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.country-meta{font-size:11.5px;font-weight:400;opacity:.75;}
/* Gold's price, inline in the collapsed row — clickable as a second way
   to buy alongside the Buy button itself, now that Gold is the only rank
   left (no more Bronze/Silver breakdown to expand into). */
.country-price-trigger{
  font-weight:700;opacity:1;color:#fff;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:2px;
}
.country-price-trigger:hover{text-decoration-color:#fff;}
.country-buy{
  width:100%;
  padding:8px 14px;border-radius:999px;border:none;
  background:var(--accent-orange);
  color:var(--blue-dark);font-weight:600;font-size:12px;font-family:inherit;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .15s ease, filter .15s ease;
}
.country-buy:hover{transform:translateY(-1.5px);filter:brightness(1.08);}
.country-buy:active{transform:translateY(0) scale(.96);filter:brightness(.96);}
/* Purchase in flight (see buyOrder() in service-panel.js) — a spinning
   ring next to "Searching…" instead of a bare text swap, so the button
   itself visibly signals "working on it" rather than looking frozen for
   however long the real provider lookup takes. */
/* Deliberately NOT gated behind prefers-reduced-motion (unlike the other
   animations in this codebase) — this spin is the only signal the button
   gives that a purchase is actually in progress, not a decorative touch,
   so it keeps turning even for a visitor with "reduce motion" on at the
   OS/browser level rather than silently going still and looking frozen. */
.country-buy .btn-spinner{
  width:12px;height:12px;flex-shrink:0;
  border-radius:50%;
  border:2px solid rgba(15,61,40,.3);
  border-top-color:var(--blue-dark);
  animation:countryBuySpin .65s linear infinite;
}
@keyframes countryBuySpin{ to{ transform:rotate(360deg); } }
/* Deliberately not a real disabled button (no [disabled] attribute) — a
   disabled button never fires click events, even through a delegated
   listener, which meant a customer clicking Buy on a 0 pcs/$0 row (no
   service picked yet, or this country genuinely out of stock) got no
   feedback at all. Muted styling signals "not a normal ready purchase"
   while staying clickable, so the click still reaches the smart message
   in the countryList click handler below. */
.country-buy--unavailable{opacity:.55;}
.country-buy--unavailable:hover{transform:none;filter:none;}
.search-wrap{position:relative;margin-bottom:10px;}
.search-box{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:8px 12px;
  border:1.5px solid transparent;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search-box:focus-within{
  border-color:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(23,76,166,.22);
}
.search-box svg{width:14px;height:14px;color:#7a9a8b;flex-shrink:0;}
.search-input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  color:var(--blue-dark);font-weight:400;font-size:12px;
  font-family:inherit;padding:0;
}
.search-input::placeholder{color:#7a9a8b;font-weight:400;}
.search-clear{
  display:none;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;border-radius:50%;
  border:none;background:transparent;color:#7a9a8b;cursor:pointer;
  padding:0;
}
.search-clear svg{width:14px;height:14px;}
.search-clear.visible{display:flex;}

/* Search dropdown — floats below the search box on focus/typing, one
   service per row (icon left, name right) — per request, distinct from
   the always-visible 3-column tile grid underneath, which it simply
   covers while open. .search-wrap already has position:relative (shared
   with the country search box above), so this just anchors to it. */
.service-search-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:#ffffff;
  border:1px solid rgba(15,44,92,.08);
  border-radius:16px;
  box-shadow:0 16px 32px -14px rgba(8,26,18,.4);
  padding:6px;
  max-height:260px;
  overflow-y:auto;
  z-index:30;
  scrollbar-width:thin;
  scrollbar-color:var(--blue-bright) transparent;
}
.service-search-dropdown.open{display:block;}
.service-search-dropdown::-webkit-scrollbar{width:6px;}
.service-search-dropdown::-webkit-scrollbar-track{background:transparent;margin:6px 0;}
.service-search-dropdown::-webkit-scrollbar-thumb{
  background:var(--blue-bright);
  border-radius:999px;
  border:1.5px solid #ffffff;
  background-clip:padding-box;
}
.service-search-dropdown::-webkit-scrollbar-thumb:hover{background:var(--blue-dark);}
/* Each row reuses the grid's own .service-tile-icon (plus its data-key
   attribute) instead of a separate icon style, so every per-brand
   treatment built up for the tile grid — Grok's full-bleed image,
   Coinbase, Kick, the big-logo white-tile family, all of it — renders
   identically here instead of drifting out of sync with its own rules. */
.ssd-row.service-tile{
  display:flex;flex-direction:row;align-items:center;
  gap:10px;padding:8px 10px;border-radius:12px;
  background:transparent;border:none;box-shadow:none;
  text-align:left;cursor:pointer;
}
.ssd-row.service-tile:hover,.ssd-row.service-tile.selected{background:#eafaf2;}
.ssd-row-name{font-size:13px;font-weight:600;color:var(--blue-dark);}
.ssd-empty{padding:14px;text-align:center;color:#5a7a6b;font-size:12px;}

/* Service grid — 3 columns of app-icon-style cards (logo + name), capped
   to exactly 3 visible rows (sizeServiceGrid in service-panel.js measures
   a card and sets max-height to fit 3 of them) so the panel doesn't grow
   unbounded with 20+ services — the rest reachable by scrolling the grid
   itself, same "cap N rows, scroll for more" pattern as the country list
   below it. */
/* minmax(0,1fr), not a bare 1fr: a plain 1fr track's automatic minimum
   width is its content's max-content size, so an unbreakable long name
   (e.g. "Foodpanda") would force that column wider than its 1/3 share
   and push the grid past the panel's edge instead of letting
   .service-tile-name's ellipsis truncate it in place. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 6px;
  margin-bottom:10px;
  overflow-y:auto;
  padding-right:2px;
  scrollbar-width:thin;scrollbar-color:rgba(15,44,92,.28) transparent;
}
/* Thumb color was leftover from when this card had a dark background —
   .service-body is white now (see comment above), so the old
   rgba(255,255,255,.28) thumb was invisible against it. */
.service-grid::-webkit-scrollbar{width:5px;}
.service-grid::-webkit-scrollbar-track{background:transparent;}
.service-grid::-webkit-scrollbar-thumb{background:rgba(15,44,92,.28);border-radius:999px;}
.service-grid::-webkit-scrollbar-thumb:hover{background:rgba(15,44,92,.45);}
.service-tile{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:9px 3px 7px;
  border-radius:16px;
  cursor:pointer;
  text-align:center;
  background:#f6f8f8;
  border:1px solid rgba(15,44,92,.06);
  box-shadow:0 2px 6px rgba(8,26,18,.15);
  transition:background .18s ease, border-color .18s ease;
}
.service-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:24px 10px;text-align:center;
  color:#5a7a6b;font-size:12px;
}
.service-tile-icon{
  position:relative;
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -1px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.service-tile-icon svg{width:24px;height:24px;flex-shrink:0;}
.service-tile-icon img{width:24px !important;height:24px !important;object-fit:contain;display:block;flex-shrink:0;}
/* Grok's artwork is a full app-icon graphic (rounded square + shadow already
   baked into the PNG), not a glyph meant to sit on a generated tile
   background — so let it fill the tile itself instead of floating small
   inside a separate colored square. */
.service-tile[data-key="grok"] .service-tile-icon{
  box-shadow:none;
  width:58px;height:58px;border-radius:17px;margin:-7px 0;
}
.service-tile[data-key="grok"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:17px;}
/* Copilot's mark should read bigger than the other glyph-on-tile icons —
   but only the mark itself, not the tile square around it — so keep the
   standard tile size and just let the image fill nearly all of it instead
   of sitting small and centered like the other 24px glyphs. */
.service-tile[data-key="mscopilot"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="gemini"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="lovable"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="githubcopilot"] .service-tile-icon img{width:38px !important;height:38px !important;}
/* Bolt.new's JPG is a solid-color square icon with no transparency (like
   Grok's), so it should fill the tile edge to edge rather than float small
   inside a separately colored background. */
.service-tile[data-key="boltnew"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="canva"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="perplexity"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="midjourney"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="vercel"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;object-fit:cover !important;}
.service-tile[data-key="notion"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="devto"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="shopee"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="zalo"] .service-tile-icon{box-shadow:none;}
.service-tile[data-key="zalo"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="aliexpress"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="zedelivery"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="temu"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="coinbase"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="lazada"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="badoo"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="chime"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="wolt"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="grindr"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="ticketmaster"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="kick"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;object-fit:cover !important;}
.service-tile[data-key="weplay"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="yubo"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="toptop"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="lemo"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="capcut"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="indrive"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="waze"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="alibaba"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="kakaotalk"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="pinterest"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="paddypower"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;}
.service-tile[data-key="huga"] .service-tile-icon img{width:100% !important;height:100% !important;border-radius:14px;object-fit:cover !important;}
.service-tile[data-key="callapp"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="hinge"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="bolt"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="bigolive"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="sugo"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="clubhouse"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="yoho"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="tango"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="meetup"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="imo"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="duolingo"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="shopify"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="azar"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="veeka"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="gamma"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="huggingface"] .service-tile-icon img{width:38px !important;height:38px !important;}
/* Cursor's source PNG has a lot of empty white margin around the mark, so
   scaling it with object-fit:contain (the default) would leave the visible
   glyph small no matter how big the box gets — crop into it with cover
   instead, which is safe since the mark sits centered in the frame. */
.service-tile[data-key="cursor"] .service-tile-icon img{width:38px !important;height:38px !important;object-fit:cover !important;}
.service-tile[data-key="deepseek"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="runway"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="figma"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="leonardoai"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="ideogram"] .service-tile-icon img{width:38px !important;height:38px !important;object-fit:cover !important;}
.service-tile[data-key="lumaai"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="github"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="firebase"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="cohere"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="amazon"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="tokopedia"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="fiverr"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="skype"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="linode"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile[data-key="keybase"] .service-tile-icon img{width:38px !important;height:38px !important;}
.service-tile.selected .service-tile-icon{
  transform:scale(1.1);
  box-shadow:0 8px 18px -4px rgba(0,0,0,.5);
}
/* Selection indicator: a small check badge on the icon's corner instead
   of tinting the tile's background/border, so the brand icon colors stay
   true whether a tile is selected or not. */
.service-tile-check{
  position:absolute;
  top:-4px;right:-4px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--blue-bright);
  border:2px solid #fff;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px -1px rgba(8,26,18,.4);
  opacity:0;
  transform:scale(.4);
  transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.service-tile-check svg{width:9px;height:9px;stroke-width:3.4;}
.service-tile.selected .service-tile-check{opacity:1;transform:scale(1);}
.service-tile-name{
  font-size:10px;font-weight:600;color:var(--blue-dark);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.support-line{
  margin:0;
  padding:14px 16px;
  border-radius:0 0 18px 18px;
  background:#eafaf2;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.support-line-icon{width:16px;height:16px;flex-shrink:0;color:var(--blue-mid);}
.support-line-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.support-line-title{font-size:11px;font-weight:700;color:var(--blue-dark);}
.support-line-sub{font-size:10.5px;font-weight:500;color:#5a7a6b;}
.support-line-sub .support-link{color:var(--blue-mid);font-weight:700;text-decoration:none;}
.support-line-sub .support-link:hover{text-decoration:underline;}
/* Its own pill button, separate from the inline "support" text link
   above — matches the reference design's two distinct actions (a plain
   link inline in the sentence, plus a standalone CTA) rather than the
   sentence-link itself styled as the button. */
.support-contact-btn{
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 12px;
  border-radius:999px;
  /* Same green as the "Buy Temporary Mail" cross-sell bar
     (phone-history.css's .ph-crosssell-bar) — a literal hex rather than
     var(--blue-mid) since this panel ships on pages that don't define
     that variable. */
  background:#1f7a52;
  border:1px solid #1f7a52;
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 2px 6px -2px rgba(15,44,92,.25);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.support-contact-icon{width:12px;height:12px;flex-shrink:0;}
.support-contact-btn:hover{
  background:#0f3d28;
  transform:translateY(-1px);
  box-shadow:0 4px 10px -3px rgba(15,44,92,.3);
}
/* ============ RESPONSIVE ============ */
/* This panel ships a fixed 290px cap tuned for sitting beside a wide
   column on desktop. Pages that wrap it to its own row on tablet/phone
   (activations.css's .act-layout, temporary-mail.css's .tmail-layout)
   were missing a matching override, so it stayed pinned at 290px with
   dead space on either side instead of using the phone's actual width —
   the homepage already had its own copy of this fix inline; centralizing
   it here covers every page that embeds the panel, including future ones. */
@media (max-width:860px){
  .service-panel{max-width:480px;width:100%;}
}

/* Below phone width, drop the service grid from 3 columns to 2 so each
   tile gets real touch-target size instead of being squeezed to fit a
   third column, per the "cards must stay tappable on mobile" requirement. */
@media (max-width:480px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;}
  .service-tile{padding:10px 4px 8px;}
  .service-tile-name{font-size:11px;}
  /* Icon + two-line text + button no longer fit one row at this width —
     stack the button below instead of letting it get squeezed or push
     the row into horizontal overflow. */
  .support-line{flex-wrap:wrap;}
  .support-contact-btn{margin-left:26px;}
}

@media (max-width:360px){
  .service-panel{max-width:100%;}
  .service-tile-icon{width:38px;height:38px;border-radius:12px;}
  .service-tile-icon svg{width:20px;height:20px;}
  .service-tile-icon img{width:20px !important;height:20px !important;}
  .service-tile[data-key="grok"] .service-tile-icon{width:48px;height:48px;border-radius:14px;margin:-5px 0;}
  .service-tile[data-key="grok"] .service-tile-icon img{border-radius:14px;}
  .service-tile[data-key="mscopilot"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="gemini"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="lovable"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="githubcopilot"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="boltnew"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="gamma"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="huggingface"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="cursor"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="deepseek"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="runway"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="figma"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="leonardoai"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="ideogram"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="lumaai"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="github"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="firebase"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="cohere"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="amazon"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="tokopedia"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="fiverr"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="skype"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="linode"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="keybase"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="canva"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="perplexity"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="midjourney"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="vercel"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="notion"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="devto"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="shopee"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="zalo"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="aliexpress"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="zedelivery"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="temu"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="coinbase"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="lazada"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="badoo"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="chime"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="wolt"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="grindr"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="ticketmaster"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="kick"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="weplay"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="yubo"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="toptop"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="lemo"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="capcut"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="indrive"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="waze"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="alibaba"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="kakaotalk"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="pinterest"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="paddypower"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="huga"] .service-tile-icon img{border-radius:12px;}
  .service-tile[data-key="callapp"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="hinge"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="bolt"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="bigolive"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="sugo"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="clubhouse"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="yoho"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="tango"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="meetup"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="imo"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="duolingo"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="shopify"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="azar"] .service-tile-icon img{width:32px !important;height:32px !important;}
  .service-tile[data-key="veeka"] .service-tile-icon img{width:32px !important;height:32px !important;}
}

@media (min-width:1280px){
  .service-panel{max-width:320px;}
}