/* Contact page. */

/* ---------------------------------------------------------------- check first */

.contact-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* Tinted rather than plain glass: it is an answer, not another way to write
     to us, and it should not read as the first of four identical cards. */
  background: linear-gradient(135deg, rgba(234, 248, 242, .92), rgba(255, 255, 255, .88));
  border: 1px solid rgba(20, 133, 95, .18);
}

.contact-check h2 { margin: 0 0 6px; font-size: 15px; }
.contact-check .page-text { margin: 0; }

.contact-check-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 18px;
}

/* ---------------------------------------------------------------- report */

.contact-report { border-color: var(--pink-line); }

.contact-report-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-report-head h2 { margin: 0 0 6px; }
.contact-report-head .page-text { margin: 0; }

.contact-report-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(254, 81, 130, .32);
}

.contact-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-include {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.contact-include li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* A dot rather than a tick: these are things to write, not things done. */
.contact-include li::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.contact-include strong { color: var(--ink); }

/* ---------------------------------------------------------------- channels */

.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px;
  margin-top: 14px;
}

/* The gaps and the mark are sized to what has to fit on one line beside them:
   "Message us on Facebook" is the longest blurb, and at 14px padding with a
   32px mark it fell four pixels short and wrapped. */
.contact-channel {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}

.contact-channel:hover { transform: translateY(-2px); background: #fff; }

.contact-channel-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--pink-wash);
  color: var(--pink);
  font-size: 14px;
  font-weight: 800;
}

/* Grows into the free space rather than leaving it to the arrow's auto margin.
   Without this the text box sits at its content width and the blurb is the part
   flexbox shrinks — "Message us on Facebook" arrived as "Message us on …" with
   40px of empty row beside it. */
.contact-channel-text { min-width: 0; display: grid; flex: 1 1 auto; }
.contact-channel-text strong { font-size: 13.5px; }
/* Wraps rather than truncates. "Message us on Facebook" cut to "Message us on
   …" tells the reader less than the two lines it would have taken, and these
   rows have a floor height, not a fixed one. */
.contact-channel-text span {
  /* Half a pixel under the usual 12px: it is what "Message us on Facebook", the
     longest of the six, needs to stay on one line so all six rows match. */
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* The exception: an address broken across two lines reads as two addresses, and
   it is the one row whose second line would be the half anybody needs. */
.contact-channel.is-email .contact-channel-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No margin: the row's own gap already separates it, and doubling that was the
   last of the width the blurb needed. */
.contact-channel-go { flex: 0 0 auto; color: var(--muted); font-size: 15px; }
.contact-channel:hover .contact-channel-go { color: var(--pink); }

/* Each platform in its own colour, as the directory and dashboard do. */
.contact-channel.is-facebook:hover { border-color: #1877f2; }
.contact-channel.is-facebook:hover .contact-channel-mark { background: #f0f5ff; color: #1877f2; }
.contact-channel.is-instagram:hover { border-color: #c13584; }
.contact-channel.is-instagram:hover .contact-channel-mark { background: #fdf0f8; color: #c13584; }
.contact-channel.is-tiktok:hover { border-color: #111; }
.contact-channel.is-tiktok:hover .contact-channel-mark { background: #f5f5f5; color: #111; }
.contact-channel.is-shopee:hover { border-color: #ee4d2d; }
.contact-channel.is-shopee:hover .contact-channel-mark { background: #fff3f0; color: #ee4d2d; }
.contact-channel.is-lazada:hover { border-color: #0f146d; }
.contact-channel.is-lazada:hover .contact-channel-mark { background: #f1f2ff; color: #0f146d; }

/* ---------------------------------------------------------------- support */

.contact-faq { margin: 16px 0 0; }

.contact-faq dt {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pink-line);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.contact-faq dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.contact-faq dd {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- footnote */

.contact-note {
  margin: 22px auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 520px) {
  .contact-report-head { flex-direction: column; gap: 12px; }
  .contact-channels { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- the three columns */

/* Channels, topics, answers. Three because they are three different questions:
   how do I reach you, what is this about, and is it already answered. */
/* Back to thirds. The middle column was widened to hold six choices two-up
   above a message form; without the form it is six choices and nothing else,
   and at that width it ran half a column short of the two beside it. Narrower,
   the tiles fall to one each and the three columns come out level. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  align-items: start;
}

/* The second and third columns are each a .card preceded by a .card, so
   app.css's stacked-card margin was landing on them — and in a grid that reads
   as two columns starting 18px lower than the one beside them. The grid's own
   gap does this spacing. */
.contact-grid > .card + .card { margin-top: 0; }

@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The answers run full width once they are the odd one out — an FAQ in a
     half-width column wraps every question onto three lines. */
  .contact-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid > :last-child { grid-column: auto; }
}

.contact-col { height: 100%; }

/* Tighter than the shared card. Three columns each paying 28px a side spend
   168px of the row on padding, which is most of what the topic tiles and the
   channel blurbs were short of. */
.contact-col { padding: clamp(16px, 2.2vw, 22px); }

.contact-col h2 { margin: 0 0 4px; font-size: 16px; }
.contact-sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.contact-col .hint { margin: 14px 0 0; }

/* A mark beside each column heading, so the three are told apart at a glance
   rather than by reading three headings. Grid rather than flex: a heading that
   wraps to two lines keeps the mark against the first, not floating at centre. */
.contact-col-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 6px;
}

.contact-col-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--pink), #ff9dbb);
  color: #fff;
  /* Nudged against the cap height of the heading beside it, which sits lower
     than the top of its own line box. */
  margin-top: -3px;
}

.contact-col-mark .sj-icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------- hero */

/* Trails the last word rather than sitting on the baseline after it. */
.contact-hero h1 { position: relative; }

.hero-sparkle {
  display: inline-block;
  width: clamp(16px, 2vw, 22px);
  margin-left: 6px;
  vertical-align: top;
  color: var(--pink);
}

.hero-sparkle .sj-icon { width: 100%; height: auto; }

/* ------------------------------------------------------------------ topics */

/* Two across, as the reference lays them out. Six single-file rows made the
   middle column twice the height of the two beside it for the same six choices.

   auto-fit rather than a fixed two, because this column is half-width at one
   breakpoint and full-width at the next: the floor decides how many fit, so the
   tiles never narrow to the point where "Seller ID & Verification" breaks
   across three lines, at any width, without a media query per case. */
.contact-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}

.contact-topic {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--pink-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

a.contact-topic:hover {
  border-color: var(--pink);
  background: #fff;
  transform: translateY(-1px);
}

.contact-topic-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff0f5, #ffe3ee);
  color: var(--pink);
}

.contact-topic-ico .sj-icon { width: 17px; height: 17px; }

.contact-topic-text strong { display: block; font-size: 14px; }

.contact-topic-text span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- answers */

.contact-faqs { display: grid; gap: 2px; }

.contact-faq-item {
  border-bottom: 1px solid var(--pink-line);
  padding: 4px 0;
}

.contact-faq-item:last-of-type { border-bottom: 0; }

/* Flex, not a floated marker: a question that runs to two lines pushed a
   floated chevron onto a third line of its own. As a flex item it stays on the
   right edge, centred against however many lines the question takes. */
.contact-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}

/* The browser's own marker is replaced with one that turns, so an open
   question reads as open at a glance. */
.contact-faq-item > summary::-webkit-details-marker { display: none; }

/* A chevron rather than a plus. The rows read as a list you can open, which is
   what they are — a plus reads as "add one of these". */
.contact-faq-item > summary::after {
  content: '\203A';
  flex: 0 0 auto;
  color: var(--pink);
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  transition: transform .18s var(--ease);
}

/* Turned down when open, so an open question reads as open at a glance. */
.contact-faq-item[open] > summary::after { transform: rotate(90deg); }

.contact-faq-item p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.contact-faq-more { margin: 16px 0 0; }

/* ------------------------------------------------------------ urgent help */

.contact-urgent {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--pink-line);
  border-radius: 12px;
  background: var(--pink-wash);
}

.contact-urgent strong { display: block; font-size: 14px; }

.contact-urgent p {
  margin: 4px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* -------------------------------------------------------- helpful information */

.contact-info {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pink-line);
}

.contact-info h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.contact-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.contact-info li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.contact-info-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #fff0f5, #ffe3ee);
  color: var(--pink);
}

.contact-info-ico .sj-icon { width: 16px; height: 16px; }

.contact-info-text { display: grid; gap: 2px; }
.contact-info-text strong { font-size: 13.5px; }

.contact-info-text > span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- closing */

.contact-closing {
  margin-top: clamp(14px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 22px);
  text-align: left;
  background: var(--pink-wash);
  border-color: var(--pink-line);
}

/* The text takes the slack, so the shield and the button stay their own size
   and the sentence between them stretches instead. */
.contact-closing-text { flex: 1 1 auto; min-width: 0; }

.contact-closing-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--pink), #ff9dbb);
  color: #fff;
}

.contact-closing-mark .sj-icon { width: 26px; height: 26px; }

.contact-closing h2 { margin: 0 0 6px; font-size: 16px; }

.contact-closing p {
  margin: 0;
  max-width: 46rem;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.contact-closing-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Facebook's own mark, from the same icon font the channel rows use. */
.contact-closing-cta-mark::before {
  font-family: 'SJ Icons Brand';
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  content: '\f39e';
}

/* Stacks and re-centres once the button no longer fits beside the sentence. */
@media (max-width: 720px) {
  .contact-closing { flex-direction: column; text-align: center; }
  .contact-closing p { margin-inline: auto; }
}

/* ------------------------------------------------- the platforms' own marks */

/* Was the first letter of the platform's name in a box, which is a letter, not
   a logo. These are the same marks the directory uses: the webp cut from the ID
   artwork for Shopee, Lazada and TikTok, and the icon font for the two it
   covers. Font Awesome's free set has no Shopee or Lazada, and an approximation
   of somebody's logo is worse than none. */
.contact-channel-mark { font-size: 0; }

.contact-channel-mark::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.contact-channel.is-shopee .contact-channel-mark::before { background-image: url('../assets/social/shopee.webp'); }
.contact-channel.is-lazada .contact-channel-mark::before { background-image: url('../assets/social/lazada.webp'); }
.contact-channel.is-tiktok .contact-channel-mark::before { background-image: url('../assets/social/tiktok.webp'); }

.contact-channel.is-facebook .contact-channel-mark::before,
.contact-channel.is-instagram .contact-channel-mark::before,
.contact-channel.is-email .contact-channel-mark::before {
  font-family: 'SJ Icons Brand';
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  background: none;
}

.contact-channel.is-facebook .contact-channel-mark::before { content: '\f39e'; }
.contact-channel.is-instagram .contact-channel-mark::before { content: '\f16d'; }

/* Email is not a brand, so it comes from the solid set. */
.contact-channel.is-email .contact-channel-mark::before {
  font-family: 'SJ Icons';
  font-weight: 900;
  font-size: 13px;
  content: '\f0e0';
}

/* --------------------------------------------------------------- alignment */

/* Every row in the three columns lines up on the same left edge and the same
   centre line, whether its text runs to one line or two. */
.contact-channel { align-items: center; }
.contact-topic { align-items: center; }

/* The channel rows are a fixed height so the column reads as a list rather
   than as cards of varying size. */
.contact-channel { min-height: 58px; }