/* -------------------------------------------------------------------------
   Portal width system (lightweight, consistent across all pages)
   - sd-breakout breaks out of boxed Elementor containers (100vw)
   - sd-portal-container re-centres content to a shared max width
   ------------------------------------------------------------------------- */

.sd-breakout{
  /* Break out of boxed Elementor containers safely (incl. iPad Safari) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

.sd-portal-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(14px, 4vw, 28px);
  padding-right: clamp(14px, 4vw, 28px);
}

/*
  Tablet/iPad: make the portal feel "app wide" (small classy gutters).
  Note: iPad landscape (especially iPad Pro) can report widths up to ~1366px.
  We still want the "app wide" layout there, so this breakpoint intentionally
  extends beyond the classic 1024px range.
*/
@media (min-width: 600px) and (max-width: 1400px){
  .sd-portal-container{
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 480px){
  .sd-portal-container{
    /* fuller-bleed on phones, still safe-area aware */
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
}

:root{
  --sc-control-h: 46px;
  --sc-gap-lg: 22px;

  --sc-primary:#ffd600;
  --sc-accent:#0b0b0f;
  --sc-border:rgba(255,255,255,.10);
  --sc-text:#f5f5fa;
  --sc-muted:rgba(245,245,250,.70);
}
.streetcards-app{
  background: var(--sc-accent);
  color: var(--sc-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 24px;
  border-radius: 24px;
}
.streetcards-app *{ box-sizing:border-box; }

/* Tablet/iPad: reduce inner padding so the UI isn't boxed/narrow */
@media (min-width: 600px) and (max-width: 1100px){
  .streetcards-app{ padding: 14px; border-radius: 22px; }
  .sc-panel{ padding: 16px; }
}

@media (max-width: 520px){
  .streetcards-app{
    padding: 12px;
    border-radius: 18px;
  }
}
.sc-header{ padding: 6px 8px 14px 8px; }
.sc-title{ font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.sc-subtitle{ margin-top: 6px; color: var(--sc-muted); font-size: 18px; }
.sc-topbar{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:12px; border:1px solid var(--sc-border);
  border-radius:18px; background: rgba(0,0,0,.25);
}
.sc-navitem{
  appearance:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:14px;
  background: transparent; color: rgba(245,245,250,.85);
  font-weight: 700;
}
.sc-navitem:hover{ background: rgba(255,255,255,.06); }
.sc-active{ background: var(--sc-primary); color: #0b0b0f; }
.sc-body{ margin-top: 18px; }

.sc-panel{
  background: rgba(0,0,0,.25);
  border:1px solid var(--sc-border);
  border-radius:22px;
  padding:18px;
}
.sc-panel h3{ margin:0 0 12px 0; font-size:22px; }
.sc-muted{ color: var(--sc-muted); }
.sc-grid{ display:grid; gap:18px; }
.sc-grid-2{ grid-template-columns: 1fr; }
@media(min-width: 980px){ .sc-grid-2{ grid-template-columns: 1.2fr .8fr; } }

/* Tablet/iPad landscape: give panels more breathing room (but keep single column for clarity) */
@media (min-width: 900px) and (max-width: 1100px){
  .sc-grid{ gap: 22px; }
}

.sc-kpis{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top: 12px; }
.sc-kpi{ background: rgba(255,255,255,.04); border:1px solid var(--sc-border); border-radius:16px; padding:12px; }
.sc-kpi span{ display:block; color: var(--sc-muted); font-size:14px; }
.sc-kpi b{ display:block; margin-top:4px; font-size:22px; color: var(--sc-primary); }

.sc-pills{ display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0; }
.sc-pill{
  display:inline-flex; align-items:center;
  padding: 9px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--sc-border);
  font-weight: 700; font-size: 14px;
}
.sc-pill-primary{ background: var(--sc-primary); color:#0b0b0f; border-color: rgba(0,0,0,.12); }

.sc-cardgrid{
  display:grid; gap:16px;
  grid-template-columns: repeat(1, 1fr);
}
@media(min-width: 720px){ .sc-cardgrid{ grid-template-columns: repeat(2,1fr);} }
@media(min-width: 1100px){ .sc-cardgrid{ grid-template-columns: repeat(3,1fr);} }

.sc-card{
  position:relative;
  background: rgba(0,0,0,.30);
  border:1px solid var(--sc-border);
  border-radius: 20px;
  padding: 14px;
  text-decoration:none;
  color: var(--sc-text);
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.sc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,214,0,.35);
  background: rgba(0,0,0,.36);
}
.sc-cardstrip{
  height: 88px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  position: relative;
  overflow:hidden;
}
.sc-roadline{
  position:absolute; left:20px; top:48px; width: 75%; height: 6px;
  background: rgba(245,245,250,.95);
  transform: rotate(-6deg);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.sc-pin{
  position:absolute; right:24px; top:42px; width: 16px; height:16px;
  background: var(--sc-primary); border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(255,214,0,.18);
}
.sc-badge{
  position:absolute; top: 106px; right: 14px;
  background: var(--sc-primary); color:#0b0b0f;
  padding: 6px 10px; border-radius: 999px;
  font-weight: 900; font-size: 12px;
}
.sc-cardtitle{ margin-top: 12px; font-size: 22px; font-weight: 900; }
.sc-cardmeta{ margin-top: 6px; color: var(--sc-muted); font-size: 14px; }

.sc-btn{
  margin-top: 12px;
  appearance:none; border:1px solid var(--sc-border);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.92);
  padding: 10px 14px;
  border-radius: 18px;
  font-weight: 800; cursor:pointer;
}
.sc-btn:hover{ background: rgba(255,255,255,.10); }
.sc-btn-primary{
  background: var(--sc-primary);
  color:#0b0b0f;
  border-color: rgba(0,0,0,.12);
}
.sc-btn-primary:hover{ filter: brightness(0.98); }

/* Secondary button (neutral glass) */
.sc-btn-secondary{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(245,245,250,.92);
}
.sc-btn-secondary:hover{ background: rgba(255,255,255,.08); }

/* Small inline status pill (used in My Streets cards) */
.sc-miniBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,245,250,.90);
}
.sc-miniBadge--sale{
  border-color: rgba(255,214,0,.30);
  background: rgba(255,214,0,.12);
  color: var(--sc-primary);
}

.sc-btn--watch.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.sc-btn.is-busy{ opacity: .75; cursor: progress; }

/* =========================================================
   COLLECTIBLE CARD (Lookbook-inspired)
   ========================================================= */

.sc-cc{
  position:relative;
  border-radius: 20px;
  padding: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow:
    0 18px 42px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sc-cc:before{
  content:"";
  position:absolute; inset:0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%, rgba(255,255,255,.16) 70%, rgba(255,255,255,.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.sc-cc:after{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(circle at 20% 10%, rgba(255,214,0,.10), transparent 45%),
              radial-gradient(circle at 80% 40%, rgba(0,170,255,.10), transparent 55%),
              radial-gradient(circle at 30% 90%, rgba(170,0,255,.08), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

.sc-cc__inner{ position:relative; z-index:2; display:block; color:inherit; text-decoration:none; }

.sc-cc__top{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.10);
  height: 118px;
}
.sc-cc__map{
  position:absolute; inset:0;
  opacity:.95;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='260' viewBox='0 0 800 260'><rect width='800' height='260' fill='%2310141c'/><g opacity='0.28' stroke='%23ffffff' stroke-width='2'><path d='M-30 40 C 120 10, 220 110, 360 70 S 620 110, 860 40'/><path d='M-40 210 C 160 150, 240 260, 420 200 S 660 170, 860 220'/><path d='M40 -20 C 60 80, 160 110, 220 140 S 320 190, 360 300'/><path d='M740 -30 C 680 60, 620 120, 540 160 S 420 200, 320 260'/></g><g opacity='0.22' fill='%23ffd600'><circle cx='140' cy='96' r='6'/><circle cx='520' cy='86' r='5'/><circle cx='620' cy='152' r='6'/></g></svg>");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
}
.sc-cc__top:before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 45%),
              linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}

.sc-cc__rarity{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  background: rgba(10,10,14,.60);
  border: 1px solid rgba(255,255,255,.14);
  text-transform: uppercase;
}

/* Sponsor badge (top map area) */
.sc-cc__sponsorbadge{
  position:absolute;
  left:10px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(10,10,14,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,245,250,.86);
}
.sc-cc__sponsorbadge--on{
  background: rgba(255,214,0,.14);
  border-color: rgba(255,214,0,.28);
}

.sc-cc__sponsorbadge__logo{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 10px;
  letter-spacing: .02em;
  background: rgba(255,214,0,.22);
  border: 1px solid rgba(255,214,0,.30);
  color: rgba(255,255,255,.95);
}

/* Make sponsored cards pop in grids without any red/magenta glow */
.sc-cc--sponsored{
  border-color: rgba(255,214,0,.20);
  box-shadow:
    0 22px 58px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,214,0,.12),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.sc-cc--sponsored:before{
  background: linear-gradient(135deg, rgba(255,214,0,.26), rgba(255,255,255,0) 32%, rgba(255,214,0,.18) 72%, rgba(255,214,0,.10));
}
.sc-cc--sponsored:after{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,214,0,.16), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(0,170,255,.10), transparent 55%),
    radial-gradient(circle at 30% 90%, rgba(170,0,255,.08), transparent 55%);
}
.sc-cc--sponsored .sc-cc__inner:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 24px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,214,0,.28), transparent 30%, transparent 70%, rgba(255,214,0,.18));
  opacity: .55;
}
.sc-cc__gem{
  width: 12px; height: 12px;
  display:inline-block;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.18));
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.sc-cc__price{
  position:absolute; left:10px; top:10px;
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
}

/* For-sale “pop” badge (makes listings stand out without introducing any theme/glow bleed) */
.sc-cc__listingpop{
  position:absolute; left:10px; top:10px;
  display:flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255, 214, 0, .12);
  border: 1px solid rgba(255, 214, 0, .28);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.sc-cc__listingpop span{
  font-weight: 1000;
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .92;
}
.sc-cc__listingpop strong{
  font-weight: 1000;
  font-size: 12px;
  color: var(--sc-primary);
}

/* Unlisted variant (used on My Streets to keep status in one place) */
.sc-cc__listingpop--unlisted{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.sc-cc__listingpop--unlisted span{
  opacity: .86;
  letter-spacing: .12em;
}

@keyframes scListingPulse{
  0%,100%{ box-shadow: 0 10px 22px rgba(0,0,0,.35); }
  50%{ box-shadow: 0 14px 28px rgba(0,0,0,.42); }
}
.sc-cc--listed .sc-cc__listingpop{ animation: scListingPulse 2.6s ease-in-out infinite; }

/* Guard against theme button styles bleeding into our pills (some themes apply magenta/red borders by default). */
.streetcards-app .sc-pill,
.streetcards-app .sc-pill:visited,
.streetcards-app .sc-market-pill,
.streetcards-app .sc-market-pill--link{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.streetcards-app .sc-pill:hover,
.streetcards-app .sc-market-pill:hover,
.streetcards-app .sc-market-pill--link:hover{
  border-color: rgba(255,214,0,.35) !important;
  background: rgba(0,0,0,.28) !important;
}

.streetcards-app .sc-pill:focus,
.streetcards-app .sc-market-pill:focus,
.streetcards-app .sc-market-pill--link:focus,
.streetcards-app .sc-pill:focus-visible,
.streetcards-app .sc-market-pill:focus-visible,
.streetcards-app .sc-market-pill--link:focus-visible{
  outline: none !important;
  border-color: rgba(255,214,0,.35) !important;
  box-shadow: 0 0 0 4px rgba(255,214,0,.10) !important;
}

.streetcards-app .sc-market-pill.is-active{
  background: rgba(255,214,0,.95) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #0b0b0f !important;
}


.sc-cc__mid{ padding: 12px 10px 10px 10px; }
.sc-cc__title{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.sc-cc__town{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  opacity: .88;
}
.sc-cc__ids{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(245,245,250,.75);
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 10px;
}

.sc-cc__owner{
  margin: 8px 10px 0 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
}
.sc-cc__ownerbadge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .06em;
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.14);
}
.sc-cc__ownerrow{ display:flex; align-items:center; gap:10px; margin-top: 10px; }
.sc-cc__avatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
}
.sc-cc__ownername{ font-weight: 1000; }
.sc-cc__sponsored{ margin-top: 8px; font-size: 10px; letter-spacing: .16em; opacity:.7; }

.sc-cc__ad{
  margin: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.32));
  border: 1px solid rgba(255,255,255,.16);
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:10px;
  align-items:center;
}
.sc-cc__advalue{ font-weight: 1000; font-size: 12px; opacity:.85; }
.sc-cc__advalue span{ display:block; margin-top:6px; font-size: 16px; color: var(--sc-primary); }
.sc-cc__adspace{
  text-align:center;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.28);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
}

.sc-cc__adlink{ cursor:pointer; user-select:none; }
.sc-cc__adlink:hover{ filter: brightness(1.03); border-color: rgba(255,255,255,.42); }
.sc-cc__adlink:focus{ outline: none; }
.sc-cc__adlink:focus-visible{ box-shadow: 0 0 0 3px rgba(0,170,255,.22); }

.sc-cc__sponsorlogo{
  width: 28px; height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 11px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.18);
}
.sc-cc__adtext{ font-weight: 1000; }
.sc-cc__adsub{ font-weight: 800; font-size: 10px; opacity:.75; letter-spacing: .08em; text-transform: uppercase; }
.sc-cc__admeta{ text-align:right; font-weight: 900; font-size: 12px; opacity:.8; }

.sc-cc__stats{
  margin: 10px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.sc-cc__stat{
  display:inline-flex; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
  font-size: 12px;
}

.sc-cc__statlabel{ font-size:11px; opacity:.75; margin: 0 6px 0 4px; }
.sc-cc__statnum{ font-weight: 900; }

.sc-cc__actions{ position:relative; z-index:3; padding: 0 10px 12px 10px; }
.sc-cc__actions .sc-btn{ width: 100%; margin-top: 10px; }

/* My Streets: compact status + 2-button layout */
.sc-cc--my .sc-cc__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.sc-cc--my .sc-cc__actions .sc-btn{ width: 100%; margin-top: 0; }
.sc-cc__mystatus{
  grid-column: 1 / -1;
  margin-top: 6px;
}
.sc-miniBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,245,250,.90);
}
.sc-miniBadge--sale{
  border-color: rgba(255,214,0,.28);
  background: rgba(255,214,0,.12);
  color: var(--sc-primary);
}

/* XL card on street profile */
.sc-cc--xl{ max-width: 520px; margin: 0 auto; }
.sc-cc--xl .sc-cc__top{ height: 150px; }
.sc-cc--xl .sc-cc__title{ font-size: 28px; }

/* Rarity colours */
.sc-cc--rarity-common .sc-cc__rarity{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sc-cc--rarity-rare .sc-cc__rarity{ border-color: rgba(70,160,255,.50); }
.sc-cc--rarity-rare .sc-cc__gem{ background: linear-gradient(135deg, #cfe9ff, #2b7cff); }
.sc-cc--rarity-epic .sc-cc__rarity{ border-color: rgba(180,90,255,.50); }
.sc-cc--rarity-epic .sc-cc__gem{ background: linear-gradient(135deg, #f2dcff, #9b3dff); }
.sc-cc--rarity-legendary .sc-cc__rarity{ border-color: rgba(255,214,0,.60); }
.sc-cc--rarity-legendary .sc-cc__gem{ background: linear-gradient(135deg, #fff1a8, #ffd600); }

/* Frame glows */
.sc-cc--frame-neon{ box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(0,160,255,.22); }
.sc-cc--frame-founders{ box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(255,214,0,.20); }
.sc-cc--frame-epic{ box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(170,0,255,.18); }

/* Street profile layout */
.streetcards-street-page .streetcards-app{ margin-top: 14px; }
.streetcards-street-page .sc-street-backbar{
  max-width: 1280px;
  margin: 14px auto 0 auto;
  padding: 0 18px;
}
.streetcards-street-page .sc-street-backbar__link{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.streetcards-street-page .sc-street-backbar__link:hover{
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.22);
}
.streetcards-street-page .sc-street-backbar__link:focus,
.streetcards-street-page .sc-street-backbar__link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,214,0,.20);
}
.sc-street{ padding: 6px; }
.sc-street__hero{
  padding: 18px 18px 12px 18px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: radial-gradient(circle at 12% 0%, rgba(255,214,0,.14), transparent 45%),
              radial-gradient(circle at 85% 20%, rgba(0,160,255,.14), transparent 50%),
              rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}
.sc-street__title{ font-size: 34px; font-weight: 1000; letter-spacing: -0.02em; }
.sc-street__sub{ margin-top: 6px; color: rgba(245,245,250,.75); font-weight: 700; }
.sc-street__nav{ margin: -6px 0 14px 0; padding: 0 6px; }
.sc-street__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.sc-street__back:hover{ filter: brightness(1.05); border-color: rgba(255,255,255,.22); }
.sc-street__back:focus,
.sc-street__back:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,214,0,.20); }
.sc-street__grid{ display:grid; gap:16px; grid-template-columns: 1fr; }
@media(min-width: 980px){ .sc-street__grid{ grid-template-columns: 1.05fr .95fr; align-items:start; } }
.sc-street__left{ display:flex; flex-direction:column; gap:16px; }
.sc-street__cardwrap{ display:flex; justify-content:flex-start; }
.sc-street__cardwrap .sc-cc{
  width: 100%;
  max-width: 560px;
}
@media(max-width: 720px){
  .sc-street__cardwrap{ justify-content:center; }
  .sc-street__cardwrap .sc-cc{ max-width: 520px; }
}

/* Keep the collectible visible while the right column scrolls (desktop/tablet). */
@media(min-width: 980px){
  .sc-street__cardwrap{ position: sticky; top: 16px; z-index: 2; }
}

.sc-street__details{ margin-top: 0; }

/* Right column panels (actions + details + upcoming modules) */
.sc-street__side{ display:flex; flex-direction:column; gap:16px; }
.sc-actions{ display:grid; gap:10px; }
.sc-actions .sc-btn,
.sc-actions .sc-ctaform .sc-btn{ margin-top: 0; width: 100%; }

/* Price history mini panel */
.sc-ph__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sc-pill--mini{ padding: 6px 10px; font-size: 12px; }
.sc-ph__spark{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; border:1px solid var(--sc-border); background: rgba(255,255,255,.03); }
.sc-spark{ width:100%; height:48px; display:block; }
.sc-spark__line{ fill:none; stroke: rgba(255,255,255,.90); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-ph__kpi{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top: 10px; }
.sc-ph__price{ font-size: 22px; font-weight: 1000; letter-spacing: -0.02em; }
.sc-ph__delta{ font-weight: 900; color: rgba(255,255,255,.75); }
.sc-ph__rows{ margin-top: 8px; }

/* Set progress panel */
.sc-setprogress__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sc-setprogress__set{ font-weight: 800; font-size: 13px; }
.sc-setprogress__kpis{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top: 10px; }
.sc-setprogress__owned strong,
.sc-setprogress__total strong{ font-weight: 1000; }
.sc-progress{ margin-top: 10px; }
.sc-progress__bar{
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.sc-progress__fill{
  height: 100%;
  width: 0;
  background: var(--sc-primary);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.sc-progress__meta{ margin-top: 8px; font-weight: 900; color: rgba(245,245,250,.70); font-size: 13px; }
.sc-setprogress__ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.sc-setprogress__ctas .sc-btn{ width: fit-content; }
@media(max-width: 520px){
  .sc-setprogress__ctas .sc-btn{ width: 100%; }
}

/* Nearby streets panel */
.sc-nearby__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sc-nearby__place{ font-weight: 800; font-size: 13px; }
.sc-nearby__list{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.sc-nearby__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid var(--sc-border);
  background: rgba(0,0,0,.28);
  text-decoration:none;
  color: var(--sc-text);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.sc-nearby__row:hover{
  transform: translateY(-1px);
  border-color: rgba(255,214,0,.28);
  background: rgba(0,0,0,.34);
}
.sc-nearby__main{ min-width: 0; }
.sc-nearby__name{ font-weight: 1000; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-nearby__meta{ display:flex; align-items:center; gap:10px; margin-top: 6px; }
.sc-nearby__pill{ background: rgba(255,255,255,.07); }
.sc-nearby__right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sc-nearby__price{ font-weight: 1000; }
.sc-nearby__cta{ font-weight: 1000; opacity:.8; font-size: 13px; }


.sc-filters .sc-filterrow{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.sc-input{ font-weight:800; }
.sc-inputbox{
  display:inline-flex; align-items:center;
  padding: 9px 12px; border-radius: 14px;
  border:1px solid var(--sc-border);
  background: rgba(255,255,255,.05);
  margin-left: 10px;
}
.sc-banner{
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--sc-primary);
  color: #0b0b0f;
  font-weight: 900;
  font-size: 20px;
}
.sc-banner-sub{ display:block; font-weight:700; margin-top:6px; font-size: 16px; opacity:.85; }

.sc-claimbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

/* Compact claim search (desktop) */
.sc-claimbar .sc-field{ flex:0 0 auto; min-width:auto; }
.sc-claimbar .sc-textinput{ width:220px; }
@media (max-width: 900px){
  .sc-claimbar .sc-field{ flex:1 1 260px; }
  .sc-claimbar .sc-textinput{ width:100%; }
}
.sc-mapfake{
  height: 380px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border:1px solid var(--sc-border);
  position:relative;
  overflow:hidden;
}
.sc-mapline{
  position:absolute; left:80px; top:160px; width: 70%; height: 8px;
  background: var(--sc-primary);
  border-radius: 999px;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 10px rgba(255,214,0,.12);
}
.sc-mappin{
  position:absolute; left: 72%; top: 170px; width: 18px; height:18px;
  background: var(--sc-primary); border-radius: 999px;
  box-shadow: 0 0 0 10px rgba(255,214,0,.16);
}
.sc-list{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.sc-listrow{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid var(--sc-border);
  background: rgba(0,0,0,.30);
}
.streetcards-admin .streetcards-card{
  margin: 16px 0;
  background: #fff;
  border:1px solid #dcdcde;
  border-radius: 14px;
  padding: 14px;
  max-width: 1240px;
}

/* Nav links */
.sc-topbar a.sc-navitem{ text-decoration:none; display:inline-flex; align-items:center; }
.sc-topbar a.sc-navitem:focus{ outline: 2px solid rgba(255,214,0,.35); outline-offset: 2px; }

/* Full-bleed mode */
.streetcards-app.sc-fullbleed{
  border-radius: 0 !important;
  padding: 0 !important;
}
.streetcards-app.sc-fullbleed .sc-header{ padding: 24px 24px 14px 24px; }
.streetcards-app.sc-fullbleed .sc-topbar{ margin: 0 24px; }
.streetcards-app.sc-fullbleed .sc-body{ padding: 0 24px 24px 24px; }


/* v0.2.3: when using Header Kit, tighten the body spacing */
.sc-body.sc-noheader{ margin-top: 0; }


/* v0.2.4: FORCE true full-width when full-bleed is enabled (Elementor wrapper-proof) */
.streetcards-app.sc-fullbleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports(padding: env(safe-area-inset-left)){
  .streetcards-app.sc-fullbleed{
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
}

/* v0.2.5: cancel common Elementor padding (24px) so full-bleed truly hits edges */
.streetcards-app.sc-fullbleed{
  margin-left: calc(50% - 50vw - 24px);
  margin-right: calc(50% - 50vw - 24px);
}


/* v0.2.6: Elementor wrapper padding killer for StreetCards blocks */
@supports(selector(:has(*))){
  .elementor .e-con:has(.streetcards-app),
  .elementor .elementor-section:has(.streetcards-app){
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
  .elementor .elementor-container:has(.streetcards-app){
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor .elementor-widget:has(.streetcards-app){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* v0.2.7: Center true-full-bleed using left/transform (fix iPad Safari 100vw offset) */
.streetcards-app.sc-fullbleed{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* v0.3.2: Claim bar controls polish */
.sc-claimbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.sc-field{ display:flex; flex-direction:column; gap:8px; flex: 1 1 320px; min-width: 240px; }
.sc-fieldlabel{ font-weight:800; color: rgba(245,245,250,.92); }
.sc-textinput{
  height: var(--sc-control-h);
  border-radius: 14px;
  border:1px solid var(--sc-border);
  background: rgba(255,255,255,.05);
  color: rgba(245,245,250,.95);
  padding: 0 14px;
  font-weight: 800;
  outline: none;
}
.sc-textinput::placeholder{ color: rgba(245,245,250,.55); font-weight:700; }
.sc-textinput:focus{ border-color: rgba(255,214,0,.35); box-shadow: 0 0 0 4px rgba(255,214,0,.10); }

/* v0.3.11: Select + marketplace controls */
.sc-select{
  height: var(--sc-control-h);
  border-radius: 14px;
  border:1px solid var(--sc-border);
  background: rgba(255,255,255,.05);
  color: rgba(245,245,250,.95);
  padding: 0 40px 0 14px;
  font-weight: 900;
  outline:none;
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,250,.75) 50%),
                    linear-gradient(135deg, rgba(245,245,250,.75) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.sc-select:focus{ border-color: rgba(255,214,0,.35); box-shadow: 0 0 0 4px rgba(255,214,0,.10); }

.sc-market-controls__head{ display:flex; flex-direction:column; gap:8px; }
.sc-market-form{ margin-top: 12px; }
.sc-market-form__row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sc-market-search{ flex: 1 1 320px; min-width: 220px; }
.sc-market-form__row .sc-select{ width: 190px; }

.sc-market-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.sc-market-pill{ cursor:pointer; }
.sc-market-pill.is-active{ background: rgba(255,214,0,.95); border-color: rgba(0,0,0,.12); color:#0b0b0f; }
.sc-market-pill--link{ text-decoration:none; }

@media(max-width: 720px){
  .sc-market-form__row{ align-items:stretch; }
  .sc-market-form__row .sc-select{ width: 100%; }
}

.sc-btn{
  height: var(--sc-control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 16px;
}

@media(max-width: 720px){
  .sc-claimbar{ align-items:stretch; }
  .sc-btn{ width: 100%; }
}


/* v0.3.3: results rows + grid helpers */
.sc-grid{ display:grid; gap: 18px; }
.sc-grid--2{ grid-template-columns: 1.4fr 1fr; }
@media(max-width: 960px){ .sc-grid--2{ grid-template-columns: 1fr; } }

.sc-map__placeholder{ height: 280px; border-radius: 18px; background: rgba(255,255,255,.04); border:1px solid var(--sc-border); }
.sc-map__hint{ margin-top: 12px; color: rgba(245,245,250,.65); font-weight: 700; }

.sc-results h3{ margin: 0 0 14px; }
.sc-result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid var(--sc-border);
  background: rgba(0,0,0,.22);
  margin-bottom: 12px;
}
.sc-muted{ color: rgba(245,245,250,.60); font-weight:700; margin-top:4px; }


/* v0.3.4 UI restored */
.sc-kpi__value{ font-size: 28px; font-weight: 950; margin-top:6px; }
.sc-pillrow{ display:flex; flex-wrap:wrap; gap:10px; }
.sc-pill--primary{ background: rgba(255,214,0,.95); border-color: rgba(0,0,0,.12); color:#0b0b0f; }
.sc-activity__row{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid var(--sc-border); }
.sc-activity__row:first-child{ border-top:0; padding-top:0; }
.sc-inbox__item{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:16px; border:1px solid var(--sc-border); background: rgba(0,0,0,.22); margin-bottom:12px; }
.sc-inbox__item .sc-btn{ width: fit-content; }


/* ELEMENTOR OVERRIDE: ensure Street Cards buttons keep brand styling even when Elementor Kit styles are global */
.streetcards-app .sc-btn,
.streetcards-app button.sc-btn,
.streetcards-app a.sc-btn{
  appearance:none !important;
  border:1px solid var(--sc-border) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(245,245,250,.92) !important;
  border-radius: 18px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.streetcards-app .sc-btn:hover,
.streetcards-app button.sc-btn:hover,
.streetcards-app a.sc-btn:hover{
  background: rgba(255,255,255,.10) !important;
}
.streetcards-app .sc-btn-primary,
.streetcards-app button.sc-btn-primary,
.streetcards-app a.sc-btn-primary{
  background: var(--sc-primary) !important;
  color:#0b0b0f !important;
  border-color: rgba(0,0,0,.12) !important;
}
.streetcards-app .sc-btn-primary:hover,
.streetcards-app button.sc-btn-primary:hover,
.streetcards-app a.sc-btn-primary:hover{
  filter: brightness(0.98) !important;
}

/* Full-screen Card Viewer modal (Lookbook-style) */
.sc-modal-open{
  overflow:hidden !important;
}

.sc-cardmodal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.sc-cardmodal.is-open{
  display: block;
}

.sc-cardmodal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}

.sc-cardmodal__panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1120px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,11,15,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

.sc-cardmodal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sc-cardmodal__heading{
  font-weight: 950;
  letter-spacing: .4px;
  color: rgba(245,245,250,.92);
}
.sc-cardmodal__close{
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.95);
  cursor: pointer;
}
.sc-cardmodal__close:hover{
  background: rgba(255,255,255,.10);
}

.sc-cardmodal__body{
  padding: 14px;
  display: grid;
  gap: 14px;
  align-items: start;
}
.sc-cardmodal__card{
  display:flex;
  flex-direction: column;
  gap: 12px;
  justify-content:flex-start;
}
.sc-cardmodal__cardinner{
  /* Align the card with the action buttons + activity blocks */
  display:flex;
  justify-content:stretch;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
/* Ensure the rendered card fills the aligned container */
.sc-cardmodal__cardinner > *{ width: 100%; }

/* Modal polish: actions + activity fill the left column and remove the "dead zone" */
.sc-cardmodal__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sc-cardmodal__actions .sc-cardmodal__action{
  width: 100%;
}
.sc-cardmodal__actions,
.sc-cardmodal__activity{
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.sc-cardmodal__activity{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.sc-cardmodal__activitytitle{
  font-weight: 950;
  color: rgba(245,245,250,.92);
  margin-bottom: 10px;
}
.sc-cardmodal__activityrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sc-cardmodal__activityrow:first-child{ border-top: 0; padding-top: 0; }

@media(max-width: 720px){
  .sc-cardmodal__actions{ grid-template-columns: 1fr; }
}

/* Share line: copy button + subtle link preview */
.sc-cardmodal__sharelabel{ font-weight: 950; letter-spacing: .2px; }
.sc-cardmodal__sharecontrols{
  margin-top: 8px;
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}
.sc-cardmodal__copybtn{ width: fit-content; }
.sc-cardmodal__sharelink{
  color: rgba(245,245,250,.60);
  text-decoration: none;
  font-weight: 800;
}
.sc-cardmodal__sharelink:hover{ text-decoration: underline; }

/* Toast feedback inside modal */
.sc-cardmodal__toast{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.70);
  color: rgba(245,245,250,.92);
  font-weight: 950;
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.sc-cardmodal__toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sc-cardmodal__meta{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.sc-cardmodal__metatitle{
  font-weight: 950;
  font-size: 16px;
  color: rgba(245,245,250,.92);
}
.sc-cardmodal__metasub{
  margin-top: 4px;
}
.sc-cardmodal__metaline{
  margin-top: 8px;
  word-break: break-word;
}

.sc-cardmodal__stats{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 10px;
}
.sc-cardmodal__statrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sc-cardmodal__statrow:last-child{ border-bottom: 0; }

/* Make the XL card look great in the modal */
.streetcards-app .sc-cc__inner--button{
  cursor: pointer;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  text-align: left;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.streetcards-app .sc-cc__inner--button:focus,
.streetcards-app .sc-cc__inner--button:focus-visible{
  outline: none;
  box-shadow: none;
}
.streetcards-app .sc-cc__inner--static{
  cursor: default;
}

/* Card viewer meta layout + ad slot */
.sc-cardmodal__meta a{
  color: var(--sc-primary);
  text-decoration: none;
}
.sc-cardmodal__meta a:hover{
  filter: brightness(0.98);
  text-decoration: underline;
}

.sc-cardmodal__metagrid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

/* Modal actions + activity (polish pass) */
.sc-cardmodal__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sc-cardmodal__action{ width: 100%; }

.sc-cardmodal__activity{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}
.sc-cardmodal__activitytitle{
  font-weight: 950;
  letter-spacing: .25px;
  color: rgba(245,245,250,.92);
  margin-bottom: 8px;
}
.sc-cardmodal__activityrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sc-cardmodal__activityrow:first-child{ border-top: 0; padding-top: 0; }

.sc-cardmodal__share{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.sc-cardmodal__sharecontrols{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}
.sc-cardmodal__copybtn{ width: fit-content; }
.sc-cardmodal__sharelink{ word-break: break-word; }

.sc-cardmodal__toast{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.70);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,245,250,.92);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.sc-cardmodal__toast.is-show{ opacity: 1; }

.sc-cardmodal__ad{
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  padding: 12px;
}
.sc-cardmodal__adlabel{
  font-weight: 950;
  letter-spacing: .3px;
  color: rgba(245,245,250,.92);
  margin-bottom: 8px;
}
.sc-cardmodal__adbox{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 12px;
  text-align: left;
  font-weight: 900;
  color: rgba(245,245,250,.78);
}
.sc-cardmodal__adcta{
  width: 100%;
  margin-top: 10px;
}

/* Sponsor panel extras (packages) */
.streetcards-app .sc-sponsor__top{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
}
.streetcards-app .sc-sponsor__logo{
  width: 44px; height: 44px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
}
.streetcards-app .sc-sponsor__title{ font-weight: 1000; }
.streetcards-app .sc-sponsor__sub{ margin-top: 2px; }
.streetcards-app .sc-sponsor__pkgs{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.streetcards-app .sc-sponsor__pkg{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 9px;
}
.streetcards-app .sc-sponsor__pkg:hover{ filter: brightness(1.02); border-color: rgba(255,255,255,.18); }
.streetcards-app .sc-sponsor__pkg strong{ display:inline-block; }
.streetcards-app .sc-sponsor__price{ float:right; font-weight: 1000; color: var(--sc-primary); }
.streetcards-app .sc-sponsor__pkg small{ display:block; margin-top: 6px; opacity:.78; }


@media (min-width: 920px){
  .sc-cardmodal__body{
    grid-template-columns: minmax(460px, 1fr) 420px;
    gap: 16px;
  }
  .sc-cardmodal__card{
    align-items: flex-start;
  }
  .sc-cardmodal__card .sc-cc{
    width: 100%;
    max-width: 560px;
  }
  .sc-cardmodal__meta{
    padding: 14px 16px;
  }
}

@media (max-width: 720px){
  .sc-cardmodal__metagrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .sc-cardmodal__panel{
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }
  .sc-cardmodal__body{
    padding: 12px;
  }
}

/* --------------------------------------------------------------------------
   0.3.9.5 UI safety fixes
   - Prevent theme/button global styles from bleeding into card wrappers (pink/red hover)
   - Make card modal body scroll so sponsor slot is always reachable
---------------------------------------------------------------------------- */

/* Some themes style all <button> elements (background, outline, glow).
   Our card wrapper is a button on the street profile page, so force it neutral. */
.streetcards-app .sc-cc__inner--button{
  background: transparent !important;
  border: 0 !important;
  padding: 12px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  outline: none !important;
}
.streetcards-app .sc-cc__inner--button:hover,
.streetcards-app .sc-cc__inner--button:active,
.streetcards-app .sc-cc__inner--button:focus,
.streetcards-app .sc-cc__inner--button:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Likewise, protect anchor-wrapped cards from global a:hover backgrounds */
.streetcards-app a.sc-cc__inner,
.streetcards-app a.sc-cc__inner:hover,
.streetcards-app a.sc-cc__inner:visited,
.streetcards-app a.sc-cc__inner:visited:hover,
.streetcards-app a.sc-cc__inner:visited:active,
.streetcards-app a.sc-cc__inner:visited:focus,
.streetcards-app a.sc-cc__inner:visited:focus-visible,
.streetcards-app a.sc-cc__inner:active,
.streetcards-app a.sc-cc__inner:focus,
.streetcards-app a.sc-cc__inner:focus-visible{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Keep our own card shadow consistent on all states */
.streetcards-app .sc-cc{
  box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}
.streetcards-app .sc-cc:hover,
.streetcards-app .sc-cc:focus-within{
  box-shadow: 0 22px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Modal: make inner body scroll so the sponsor slot + CTA never get cut off */
.sc-cardmodal__panel{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sc-cardmodal__head{ flex: 0 0 auto; }
.sc-cardmodal__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-cardmodal__meta{ flex: 0 0 auto; }

/* Small tap tooltip icon inside stat pills */
.streetcards-app .sc-cc__tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  opacity: .85;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.streetcards-app .sc-cc__tip:active{ transform: scale(.98); }

/* Global toast (for tap tooltips, works outside the modal) */
.sc-global-toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 999999;
  padding: 10px 12px;
  max-width: min(520px, calc(100vw - 24px));
  border-radius: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  background: rgba(10,10,12,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.sc-global-toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Offer modal polish (match listing modal vibe) */
.sc-offer-modal .sc-cardmodal__panel{ max-height: calc(100svh - 60px); }
@supports(padding: max(0px)){
  .sc-offer-modal .sc-cardmodal__panel{ margin-bottom: max(18px, env(safe-area-inset-bottom)); }
}
.sc-offer-modal .sc-input{
  background: rgba(10,12,16,.85);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.sc-offer-modal .sc-input::placeholder{ color: rgba(255,255,255,.45); }
.sc-offer-success{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0 4px;
}
.sc-offer-success__title{ font-weight: 900; letter-spacing: .2px; margin-bottom: 4px; }
.sc-offer-success__msg{ opacity: .78; font-weight: 650; }


/* Modal header (shared) */
.sc-cardmodal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sc-cardmodal__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 16px;
  color: rgba(245,245,250,.96);
}
.sc-cardmodal__body{
  padding: 16px;
  display: grid;
  gap: 14px;
}

/* Offer modal: closer to listing modal sizing */
.sc-offer-modal .sc-cardmodal__panel{
  width: min(860px, calc(100% - 28px));
}