/* ============================================================================
   SimpleSwap shared UI — header + footer
   Standalone, framework-agnostic. Ported from the main simpleswap.io site.
   All classes are prefixed `ss-` and tokens are scoped to `.ss-root`
   so the bundle never clashes with the host page's own styles.
   ========================================================================= */

/* Inter — the main-site font (Google Inter 400/500/600/700). Loaded here so the
   bundle matches simpleswap.io instead of falling back to the host's system
   font. Hosts that self-host Inter or block Google Fonts (CSP) can drop this
   @import — the stack falls back. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.ss-root {
  /* --- brand palette (subset of the main-site theme) --- */
  --ss-text-primary: #252c44;
  --ss-text-secondary: #3f5878;
  --ss-text-tertiary: #859ab5;
  --ss-text-quaternary: #c6d5ea;
  --ss-text-white: #f7f8fa;
  --ss-accent: #0f75fc;
  --ss-accent-hover: #0044c9;
  --ss-surface-page-dark: #062763;
  --ss-border-dark: #123276;
  --ss-surface-footer: #010e27;
  --ss-surface-footer-dark: #010c22;
  --ss-button-dark-secondary: #1b2b4b;
  --ss-button-dark-secondary-hover: #2d3d5d;
  --ss-surface-dark-primary: #252c44;
  --ss-surface-box-dark: #0d3989;
  --ss-surface-box: #ecf1f7;
  --ss-success: #3fbb7d;
  --ss-brand-shape-2: #033288;
  --ss-brand-shape-4: #22489a;
  --ss-yellow: #fdd44f;

  /* Inter first (matches the main site), then a system fallback chain
     (system-ui, Arial, -apple-system, BlinkMacSystemFont, Segoe UI) */
  --ss-font: 'Inter', system-ui, Arial, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  box-sizing: border-box;
  font-family: var(--ss-font);
}

.ss-root *,
.ss-root *::before,
.ss-root *::after {
  box-sizing: border-box;
}

/* =========================== HEADER ====================================== */

.ss-header {
  border-bottom: 1px solid var(--ss-border-dark);
  background-color: var(--ss-surface-page-dark);
}

.ss-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 8px 16px;
}

@media (min-width: 1280px) {
  .ss-header__container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: 72px;
    margin: 0 auto;
    padding: 0 32px;
  }
}

/* logo */
.ss-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 0;
  text-decoration: none;
}
.ss-header__logo svg {
  display: block;
}

/* --- desktop nav --- */
.ss-header__nav {
  display: none;
}
@media (min-width: 1280px) {
  .ss-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: center;
  }
}

.ss-nav__item {
  position: relative;
}

.ss-nav__trigger,
.ss-nav__plain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: none;
  background: transparent;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-quaternary);
  text-decoration: none;

  transition: color 0.2s ease;
}
.ss-nav__trigger .ss-chevron {
  color: var(--ss-text-tertiary);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ss-nav__trigger:hover,
.ss-nav__plain:hover,
.ss-nav__item[data-open='true'] .ss-nav__trigger {
  color: var(--ss-text-white);
}
.ss-nav__item[data-open='true'] .ss-chevron {
  transform: rotate(180deg);
  color: var(--ss-text-white);
}

/* --- desktop dropdown --- */
.ss-nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 1200;

  display: none;
  min-width: 220px;
  padding: 32px;

  border-right: 1px solid var(--ss-border-dark);
  border-bottom: 1px solid var(--ss-border-dark);
  border-left: 1px solid var(--ss-border-dark);
  border-radius: 0 0 12px 12px;

  background: rgb(6 39 99 / 92%);
  backdrop-filter: blur(20px);
}
@supports (backdrop-filter: blur(20px)) {
  .ss-nav__dropdown {
    background: rgb(6 39 99 / 70%);
  }
}
.ss-nav__item[data-open='true'] .ss-nav__dropdown {
  display: block;
}
/* keep a hover bridge so the dropdown doesn't close in the 14px gap */
.ss-nav__item[data-open='true'] .ss-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.ss-nav__dropdown--columns {
  display: none;
}
.ss-nav__item[data-open='true'] .ss-nav__dropdown--columns {
  display: flex;
  gap: 24px;
}
.ss-nav__dropdown--grid {
  display: none;
}
.ss-nav__item[data-open='true'] .ss-nav__dropdown--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  column-gap: 30px;
}
.ss-nav__col {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

.ss-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 8px;

  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-quaternary);
  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}
.ss-nav__link:hover {
  color: var(--ss-text-white);
}
/* coin / pair / buy rows use tighter padding on the site (p=8) */
.ss-nav__dropdown--columns .ss-nav__link:not(.ss-nav__link--head) {
  padding: 8px;
}

/* --- right-side cluster: controls + auth (desktop only) --- */
.ss-header__right {
  display: none;
}
@media (min-width: 1280px) {
  .ss-header__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
  }
}

.ss-header__auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- header controls (Download App / Exchange history / Language) --- */
.ss-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ss-ctrl__item {
  position: relative;
}
.ss-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ss-text-quaternary);

  transition: color 0.2s ease;
}
.ss-ctrl--icon {
  padding: 0 10px;
}
.ss-ctrl .ss-chevron {
  color: var(--ss-text-tertiary);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ss-ctrl:hover,
.ss-ctrl__item[data-open='true'] .ss-ctrl {
  color: var(--ss-text-white);
}
.ss-ctrl__item[data-open='true'] .ss-chevron {
  transform: rotate(180deg);
  color: var(--ss-text-white);
}

/* controls dropdown — reuses the nav dropdown look, right-aligned */
.ss-ctrl__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  left: auto;
  z-index: 1200;

  display: none;
  padding: 32px;

  border-right: 1px solid var(--ss-border-dark);
  border-bottom: 1px solid var(--ss-border-dark);
  border-left: 1px solid var(--ss-border-dark);
  border-radius: 0 0 12px 12px;

  background: rgb(6 39 99 / 92%);
  backdrop-filter: blur(20px);
}
@supports (backdrop-filter: blur(20px)) {
  .ss-ctrl__menu {
    background: rgb(6 39 99 / 70%);
  }
}
.ss-ctrl__item[data-open='true'] .ss-ctrl__menu {
  display: block;
}
.ss-ctrl__item[data-open='true'] .ss-ctrl__menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

/* Download App dropdown */
.ss-dlapp {
  width: 230px;
}
.ss-dlapp__title {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.ss-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  width: 120px;
  height: 120px;
  border: 2px solid rgb(221 236 255 / 40%);
  border-radius: 12px;
  color: #ddecff;
  background: rgb(255 255 255 / 8%);
  backdrop-filter: blur(16px);
}
.ss-qr svg {
  display: block;
  width: 92px;
  height: 92px;
}
.ss-dlapp__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;

  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  background: #173f88;

  transition: background 0.2s ease;
}
.ss-store svg {
  flex: 0 0 auto;
}
.ss-store:hover {
  background: #214992;
}

/* Language dropdown */
.ss-lang {
  width: 192px;
}
.ss-lang__item {
  display: block;
  width: 192px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: default;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ss-text-quaternary);
  text-align: left;

  transition: color 0.2s ease, background 0.2s ease;
}
.ss-lang__item:hover {
  color: var(--ss-text-white);
  background: var(--ss-border-dark);
}

/* Exchange history dropdown — always the empty state (like a logged-out user) */
.ss-exhist {
  width: 600px;
  max-width: calc(100vw - 64px);
}
.ss-exhist__empty {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-quaternary);
  text-align: center;
}

/* dropdown item icons (left section) */
.ss-nav__lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ss-nav__ico {
  flex: 0 0 auto;
  color: inherit; /* matches the item text (quaternary -> white on hover) */
}
.ss-coin {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.ss-pair {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  width: 36px;
  height: 24px;
}
.ss-pair .ss-coin:last-child {
  position: absolute;
  left: 12px;
}

.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.2s ease, color 0.2s ease;
}
.ss-btn--primary {
  background: var(--ss-accent);
  color: #fff;
}
.ss-btn--primary:hover {
  background: var(--ss-accent-hover);
}
.ss-btn--ghost {
  background: transparent;
  color: var(--ss-text-quaternary);
}
.ss-btn--ghost:hover {
  color: var(--ss-text-white);
}
.ss-btn--sm {
  height: 32px;
  padding: 0 12px;
}
/* muted dark-blue filled button (mobile "Log in") */
.ss-btn--dark {
  background: var(--ss-surface-box-dark);
  color: #fff;
}
.ss-btn--dark:hover {
  background: #11409a;
}
/* full-width button (mobile footer auth, stacked) */
.ss-btn--block {
  width: 100%;
  height: 48px;
}

/* NEW badge */
.ss-badge-new {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 4px; /* source badge-new has margin-left:4px */
  padding: 0 8px;
  border-radius: 999px; /* pill, like the source badge-new (was a 4px rect) */
  background: var(--ss-success); /* = --notifications-success-accent #3fbb7d */
  color: #fff;
  font-size: 12px;
  font-weight: 500; /* was 600 */
  line-height: 20px; /* was 18px */
}
/* mobile Predictions label: flex like the source .link (gap 8) so the badge
   sits 8px + its 4px margin from the text */
.ss-pred-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- mobile controls --- */
.ss-header__mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1280px) {
  .ss-header__mobile {
    display: none;
  }
}

.ss-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ss-text-white);
  cursor: pointer;
}
/* the drawer close (X) is a muted close button, not white like the
   top-bar hamburger */
.ss-mobile-panel__head .ss-burger {
  color: var(--ss-text-tertiary);
}

/* --- mobile slide-in panel (slides in from the right, like the real one) --- */
.ss-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
}
.ss-mobile-panel[data-open='true'] {
  pointer-events: auto;
}
.ss-mobile-panel__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.ss-mobile-panel[data-open='true'] .ss-mobile-panel__overlay {
  opacity: 1;
}
.ss-mobile-panel__sheet {
  position: absolute;
  inset: 0 0 0 auto;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  width: min(380px, 100%);
  /* clip (not hidden) so the off-screen drill sub-panels never create a
     horizontal scroll area that could shift the open one sideways */
  overflow-x: clip;
  overflow-y: auto;
  background: var(--ss-surface-footer);
  transition: transform 0.25s ease;
}
.ss-mobile-panel[data-open='true'] .ss-mobile-panel__sheet {
  transform: translateX(0);
}
.ss-mobile-panel__head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}
.ss-mobile-panel__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 56px 16px 40px;
}
@media (min-width: 768px) {
  .ss-mobile-panel__head {
    padding: 24px 24px 0 48px;
  }
  .ss-mobile-panel__body {
    padding: 56px 24px 40px 48px;
  }
}

/* mobile accordion (inline expand; static right chevron, no dividers) */
.ss-macc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ss-macc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: transparent;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 400; /* mobile .button/.link inherit 400 (only group labels are 500) */
  line-height: 1.5; /* items inherit body line-height 1.5 (reset.css), not 160% */
  color: var(--ss-text-quaternary);
  text-decoration: none;
}
.ss-macc__chev {
  flex: 0 0 auto;
  color: inherit; /* quaternary in drill rows, tertiary in the globe button */
}
/* mobile: Download App label (apple + google play icons) */
.ss-macc__trigger .ss-nav__lead {
  gap: 8px;
}
/* mobile: non-interactive row (Exchange history — visual only) */
.ss-macc__static {
  cursor: default;
}

/* --- drill-down sub-panels (slide in from the right over the drawer) ----- */
.ss-msub {
  /* a child of .ss-mobile-panel (which doesn't scroll), NOT of the scrollable
     sheet — so scrolling a long sub-panel never reveals the drawer footer.
     Covers the drawer column (right, full height); its own overflow scrolls. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 50;

  display: flex;
  flex-direction: column;
  gap: 16px; /* matches the source <Stack gap={16}> between rows */
  width: min(380px, 100%);
  overflow: auto;

  padding: 72px 16px 40px;

  opacity: 0;
  background: var(--ss-surface-footer);
  transform: translateX(100%);

  transition: transform 0.3s ease, opacity 0.3s ease;
}
.ss-msub[data-open='true'] {
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 768px) {
  .ss-msub {
    padding-left: 48px;
  }
}
.ss-msub__back {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  color: var(--ss-text-secondary);
}
.ss-msub__sep {
  width: 100%;
  height: 0;
  margin: 0; /* spacing comes from the parent's 16px gap */
  border: none;
  border-bottom: 1px solid var(--ss-button-dark-secondary);
}
/* nav links inside a sub-panel (text / coin logos); exclude .ss-btn and
   .ss-mstore so the "Create a new exchange" button and the store-badge buttons
   keep their own styling */
.ss-msub a:not(.ss-btn):not(.ss-mstore) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;

  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-text-quaternary);
  text-decoration: none;

  transition: color 0.2s ease;
}
.ss-msub a:not(.ss-btn):not(.ss-mstore):hover {
  color: var(--ss-text-white);
}
/* chevron on a sub-panel section link (Supported Coins › etc.) — inherits the
   link colour (quaternary, white on hover), unlike the tertiary row chevron */
.ss-msub__chev {
  flex: 0 0 auto;
}
/* Exchange history empty state ("You don't have any exchanges yet") */
.ss-msub__empty {
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-quaternary);
}
.ss-msub__subhead {
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-quaternary);
  opacity: 0.5;
}
/* language rows (render only; no navigation) */
.ss-msub__langs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.ss-msub__lang {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 6px 0;
  border: none;
  background: transparent;
  cursor: default;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-text-quaternary);
  text-align: left;
}
/* "Cheaper on the app" caption */
.ss-msub__caption {
  font-size: 14px;
  line-height: 160%;
  color: var(--ss-text-quaternary);
  text-align: center;
}
/* full-width light store buttons (real store badges, like the app menu) */
.ss-mstore-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-msub .ss-mstore {
  display: grid;
  place-items: center;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: var(--ss-surface-box);
  transition: filter 0.2s ease;
}
.ss-msub .ss-mstore:hover {
  filter: brightness(0.96);
}
.ss-mstore img {
  display: block;
  /* explicit width like the source (Image w=124 h=24 object-fit contain) —
     the badge SVGs have no intrinsic width, so width:auto collapses to 0 */
  width: 124px;
  height: 24px;
  object-fit: contain;
}
/* group separators around the Exchange history / Download App block */
.ss-macc__sep {
  height: 0;
  margin: 16px 0;
  border: none;
  border-bottom: 1px solid var(--ss-button-dark-secondary);
}

/* mobile language trigger (boxed globe in the panel head) */
.ss-mlang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: var(--ss-surface-dark-primary);
  color: var(--ss-text-tertiary);
  cursor: pointer;
}

/* =========================== FOOTER ====================================== */

.ss-footer {
  background-color: var(--ss-surface-footer);
}

/* ---- footer top row: responsive grid (mobile / tablet / desktop) -- */
.ss-ftop {
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 0;
}
@media (min-width: 768px) {
  .ss-ftop {
    width: 640px;
    padding: 24px 0 0;
  }
}
@media (min-width: 1200px) {
  .ss-ftop {
    width: 1100px;
  }
}

/* grid — MOBILE (<768): single column, fiat on top, then widgets, rating, apps */
.ss-ftop__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 24px;
  grid-template-areas:
    "fiat"
    "divider"
    "reviews"
    "rating"
    "apps"
    "track";
}
.ss-ftop__reviews { grid-area: reviews; }
.ss-fapps { grid-area: apps; }
.ss-ffiat { grid-area: fiat; }
.ss-frating { grid-area: rating; }
.ss-ftop__divider { grid-area: divider; }
.ss-ftrack { grid-area: track; }
/* the fiat/locale group is flattened on mobile/tablet so fiat joins the grid */
.ss-ftop__group { display: contents; }
.ss-flocale { display: none; } /* language is desktop-only */

/* TABLET (768–1279): fiat top-right, then [reviews | apps] row */
@media (min-width: 768px) {
  .ss-ftop__grid {
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    gap: 32px 16px;
    grid-template-areas:
      "fiat    fiat"
      "divider divider"
      "reviews apps"
      "track   track";
  }
  .ss-ffiat { justify-self: end; }
  .ss-ftop__reviews { justify-self: start; }
  .ss-fapps { justify-self: end; }
  .ss-frating { display: none; } /* app rating is mobile-only */
}

/* DESKTOP (>=1200, aligned with the 1100px container): reviews | apps | fiat+locale */
@media (min-width: 1200px) {
  .ss-ftop__group {
    display: flex;
    gap: 24px;
    align-items: center;
    grid-area: group;
    justify-self: end;
  }
  .ss-flocale { display: block; }
  .ss-ftop__grid {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    justify-items: start;
    gap: 40px 24px;
    grid-template-areas:
      "reviews apps group"
      "divider divider divider"
      "track track track";
  }
  .ss-ffiat { justify-self: auto; }
  .ss-fapps { justify-self: auto; }
  .ss-ftrack { justify-self: end; width: 180px; }
}

/* Cryptoradar + Trustpilot column */
.ss-ftop__reviews {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
@media (min-width: 768px) {
  .ss-ftop__reviews {
    align-items: flex-start;
  }
}
.ss-cryptoradar {
  width: 250px;
  height: 120px;
  border: 0;
}
.ss-trustpilot {
  width: 265px;
  min-height: 24px;
}

/* app store badges: mobile full-width, tablet 190px, desktop fit-content */
.ss-fapps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
@media (min-width: 768px) {
  .ss-fapps {
    width: auto;
    align-items: center;
  }
}
.ss-fapp {
  display: grid;
  place-items: center;
  width: 100%;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ss-surface-box);
  transition: filter 0.2s ease;
}
@media (min-width: 768px) {
  .ss-fapp { width: 190px; }
}
@media (min-width: 1200px) {
  .ss-fapp { width: fit-content; }
}
.ss-fapp:hover {
  filter: brightness(0.96);
}
.ss-fapp img {
  display: block;
  width: 124px;
  height: 24px;
  object-fit: contain;
}

/* app rating (mobile only) */
.ss-frating {
  display: flex;
  gap: 14px;
  align-items: center;
}
.ss-frating__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ss-brand-shape-2);
  border: 1px solid var(--ss-brand-shape-4);
}
.ss-frating__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ss-frating__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-text-white);
}
.ss-frating__stars {
  display: flex;
  align-items: center;
}
.ss-frating__star {
  display: block;
  flex: 0 0 auto;
}
.ss-frating__val {
  margin-left: 8px;
  font-size: 14px;
  color: var(--ss-text-tertiary);
}
/* app rating is mobile-only (after the base rule so it wins the cascade) */
@media (min-width: 768px) {
  .ss-frating {
    display: none;
  }
}

/* Buy & sell crypto */
.ss-ffiat {
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.ss-ffiat__cap {
  font-size: 14px;
  font-weight: 500;
  color: var(--ss-text-white);
  white-space: nowrap;
}
.ss-ffiat__card {
  flex: 0 0 auto;
}

/* language selector (visual only) */
.ss-flocale__btn {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  width: 210px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--ss-button-dark-secondary);
  cursor: default;
}
.ss-flocale__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-white);
}
.ss-flocale__btn svg {
  flex: 0 0 auto;
  color: var(--ss-text-tertiary);
}

/* divider (spacing handled by the grid gap) */
.ss-ftop__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--ss-button-dark-secondary);
  opacity: 0.3;
}

/* Track Exchange ID (visual only) */
.ss-ftrack {
  position: relative;
  width: 100%;
}
.ss-ftrack__input {
  width: 100%;
  padding: 0 36px 8px 0;
  border: none;
  border-bottom: 1px solid var(--ss-button-dark-secondary);
  border-radius: 0;

  font-family: inherit;
  font-size: 14px;
  color: #fff;

  background: transparent;
  outline: none;

  transition: border-color 0.2s ease;
}
.ss-ftrack__input::placeholder {
  color: var(--ss-text-white);
}
.ss-ftrack__input:hover,
.ss-ftrack__input:focus {
  border-bottom-color: var(--ss-text-tertiary);
}
.ss-ftrack__btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ss-text-tertiary);
  cursor: pointer;
}
/* desktop track width 180 (after the base width:100% so it wins the cascade) */
@media (min-width: 1200px) {
  .ss-ftrack {
    width: 180px;
  }
}

.ss-footer__wrap {
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 0;
}
@media (min-width: 768px) {
  .ss-footer__wrap {
    width: 640px;
    padding: 32px 0 56px;
  }
}
@media (min-width: 1200px) {
  .ss-footer__wrap {
    width: 1100px;
  }
}

.ss-footer__nav {
  display: block;
}
@media (min-width: 768px) {
  .ss-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
@media (min-width: 1200px) {
  .ss-footer__nav {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 40px;
  }
}
/* last two columns share one cell on desktop */
.ss-footer__combined {
  display: contents;
}
@media (min-width: 1200px) {
  .ss-footer__combined {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

.ss-fcol__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid var(--ss-button-dark-secondary);
  background: transparent;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-tertiary);
  text-align: left;
}
.ss-fcol__control .ss-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ss-fcol[data-open='true'] .ss-fcol__control {
  border-bottom: none;
}
.ss-fcol[data-open='true'] .ss-chevron {
  transform: rotate(180deg);
}

.ss-fcol__panel {
  display: none;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ss-button-dark-secondary);
}
.ss-fcol[data-open='true'] .ss-fcol__panel {
  display: block;
}

@media (min-width: 768px) {
  .ss-fcol__control {
    pointer-events: none;
    display: block;
    width: auto;
    margin-bottom: 16px;
    padding: 0;
    border-bottom: none;
  }
  .ss-fcol__control .ss-chevron {
    display: none;
  }
  .ss-fcol__panel {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.ss-fcol__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss-fcol__list a {
  font-size: 14px;
  line-height: 160%;
  color: var(--ss-text-white);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-fcol__list a:hover {
  color: var(--ss-text-quaternary);
}

/* bottom row */
.ss-footer__bottom {
  background-color: var(--ss-surface-footer-dark);
}
.ss-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px;
}
@media (min-width: 768px) {
  .ss-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 593px;
    padding: 24px 0;
  }
}
@media (min-width: 1200px) {
  .ss-footer__bottom-inner {
    width: 1100px;
  }
}
.ss-footer__copyright {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  color: var(--ss-text-tertiary);
}
.ss-footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ss-footer__socials a {
  display: inline-flex;
  line-height: 0;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-footer__socials a:hover {
  color: var(--ss-text-quaternary);
}
.ss-footer__socials a svg {
  fill: currentColor;
}
.ss-footer__contacts {
  font-size: 14px;
  color: #fff;
}