/* Social media pages (TikTok, Instagram, Facebook): layout comes from info.css, header and brand from signup.css */

.social__icon {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
}

/* ---------- Embed box ---------- */
.embed {
  --embed-w: 40rem;
  --embed-h: 36rem;
  width: 100%;
  max-width: var(--embed-w);
  margin-inline: auto;
}

.embed--tiktok {
  --embed-w: 48rem;
  --embed-h: 31rem;
}

.embed--instagram {
  --embed-w: 30rem;
  --embed-h: 34rem;
}

.embed--facebook {
  --embed-w: 31.25rem;
  --embed-h: 44rem;
}

.embed__ask {
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 2px solid var(--black);
  border-radius: var(--radius-lg);
  text-align: center;
}

.embed__note {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  color: #333;
  line-height: 1.7;
}

.embed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.embed__frame {
  display: block;
  width: 100%;
  height: var(--embed-h);
  border: 2px solid var(--black);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* ---------- Other platforms ---------- */
.social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Arabic / RTL ---------- */
[lang="ar"] .embed__note {
  line-height: 1.9;
}