/* Public verification page for a single ID. */

/* The verdict comes first and is unmissable: someone scanning a QR in a shop
   has one question, and it should be answered before they read anything else. */
.verify-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.verify-banner.is-ok { background: linear-gradient(135deg, #eafaf3, #d8f3e6); border: 1px solid #b6e5cf; }
.verify-banner.is-bad { background: linear-gradient(135deg, #fdeff2, #fbdde3); border: 1px solid #f3c2cd; }

.verify-banner strong { display: block; font-size: 17px; }
.verify-banner.is-ok strong { color: var(--ok); }
.verify-banner.is-bad strong { color: var(--bad); }
.verify-banner p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.verify-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.verify-banner.is-ok .verify-mark { background: linear-gradient(135deg, #34c98a, #14855f); }
.verify-banner.is-bad .verify-mark { background: linear-gradient(135deg, #e8697f, #c0324b); }

.profile-card { text-align: center; }

.profile-id { max-width: 300px; margin: 0 auto 18px; }

.profile-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}

.profile-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--pink-wash);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* The hint's base style lives in directory.css, which this page does not load.
   Repeating the rule here beats pulling in a whole stylesheet for one label —
   without it the hint rendered as permanently visible plain text. */
.profile-thumb .directory-thumb-hint {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  background: linear-gradient(180deg, rgba(43, 31, 69, 0), rgba(43, 31, 69, .66));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.profile-thumb:hover .directory-thumb-hint,
.profile-thumb:focus-visible .directory-thumb-hint { opacity: 1; }

.profile-name {
  margin: 0;
  font-size: clamp(24px, 5vw, 32px);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.profile-role {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pink);
}

.profile-location {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Quieter than the location above it: this is context, not the address, and
   sentence case keeps it from reading as another shouted field. */
.profile-since {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.profile-call { margin-top: 18px; }
.profile-call .sj-icon { width: 17px; height: 17px; }

/* ---------- the seller's shops ---------- */

.profile-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pink-line);
  text-align: left;
}

.profile-links-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* One column while there is only room for one, two as soon as there is room
   for two. Four platforms is the most anyone has, so this never runs past two
   rows on a phone. */
.profile-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 10px;
}

/* A row, not a chip. This is a tap target on a phone held in a shop, so it gets
   a whole line and a comfortable height rather than being one of four small
   words competing for the same thumb. */
.profile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pink-line);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              box-shadow .18s var(--ease), transform .12s var(--ease);
}

.profile-link:hover,
.profile-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/*
 * The platform's own mark, cut from the ID artwork rather than drawn again.
 * Font Awesome's free set has no Shopee or Lazada, and an approximation of
 * somebody's logo is worse than none — these are the exact marks already
 * printed along the bottom of every S&J ID. Repeated from directory.css, which
 * this page does not load; see the thumb hint above for the same trade.
 */
.profile-link-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: var(--pink-wash);
  background-size: 21px 21px;
  background-repeat: no-repeat;
  background-position: center;
}

.profile-link.is-shopee .profile-link-ico { background-image: url('../assets/social/shopee.webp'); }
.profile-link.is-lazada .profile-link-ico { background-image: url('../assets/social/lazada.webp'); }
.profile-link.is-tiktok .profile-link-ico { background-image: url('../assets/social/tiktok.webp'); }

/* Facebook is not on that bar — it is drawn into the ID's pills instead — so it
   keeps the icon font the rest of the portal already uses for it. */
.profile-link.is-facebook .profile-link-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'SJ Icons Brand';
  font-weight: 400;
  font-size: 19px;
  color: #1877f2;
  background-color: #eff4ff;
}

.profile-link.is-facebook .profile-link-ico::before { content: '\f39e'; }

.profile-link-text {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
}

.profile-link-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* The address it leads to. Clipped rather than wrapped: a shop URL that runs to
   two lines makes every row a different height. */
.profile-link-text span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-link-go {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--pink-soft);
  transition: color .16s var(--ease), transform .16s var(--ease);
}

.profile-link:hover .profile-link-go,
.profile-link:focus-visible .profile-link-go {
  transform: translate(1px, -1px);
}

/* Each platform's own colour, so the row is scannable at a glance. */
.profile-link.is-shopee:hover, .profile-link.is-shopee:focus-visible { border-color: #ee4d2d; background: #fff5f2; }
.profile-link.is-lazada:hover, .profile-link.is-lazada:focus-visible { border-color: #0f146d; background: #f4f5ff; }
.profile-link.is-tiktok:hover, .profile-link.is-tiktok:focus-visible { border-color: #111; background: #f6f6f6; }
.profile-link.is-facebook:hover, .profile-link.is-facebook:focus-visible { border-color: #1877f2; background: #f2f6ff; }

.profile-link.is-shopee:hover .profile-link-go { color: #ee4d2d; }
.profile-link.is-lazada:hover .profile-link-go { color: #0f146d; }
.profile-link.is-tiktok:hover .profile-link-go { color: #111; }
.profile-link.is-facebook:hover .profile-link-go { color: #1877f2; }

/* Said once, under the shops rather than beside each one: the warning is about
   how to pay, which is the same wherever they buy. */
.profile-links-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.profile-qr {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.profile-qr > div { flex: 1 1 14rem; }
.profile-qr h2 { margin-bottom: 6px; }

.profile-qr img {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pink-line);
  background: #fff;
  padding: 6px;
}

@media (max-width: 520px) {
  .profile-qr { justify-content: center; text-align: center; }
}