/* AJAW Trade — Request for Quotation landing.

   Built against Alibaba's mobile RFQ screen (docs/alibaba-mobile/raw/rfq-*.png),
   which Giuliano asked for by name. Their structure, kept:

     dark hero       promise + three "popular request" tiles
     bright panel    the brief itself, one box, one button
     history rail    "get quotes for what you were viewing"

   Their colour, not kept. Alibaba's hero is navy and their CTA is orange; ours
   is the AJAW purple family throughout, because "we are fucking purple" has come
   up more than once. Conveniently their navy (#2a2a72-ish) sits almost exactly
   where --deep (#251f95) already is, so the layout transfers without fighting it.

   Mobile-first: the base rules ARE the phone layout, and the >=900px block
   widens it for desktop. That is the opposite of the rest of this codebase and
   deliberate — this screen was designed from the phone capture outwards. */

/* ---------- hero ---------------------------------------------------------- */
.rfq-hero {
  margin: 0 -16px;                 /* full-bleed on a phone, inside .wrap gutters */
  padding: 14px 18px 20px;
  color: #fff;
  background:
    radial-gradient(130% 120% at 85% 0%, rgba(143, 136, 255, .55) 0%, rgba(143, 136, 255, 0) 55%),
    linear-gradient(160deg, #1b1670 0%, var(--deep) 45%, #3129b5 100%);
}
.rfq-hero-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}
/* Alibaba marks the page with a small square "RFQ" chip next to the title. */
.rfq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 21px;
  padding: 0 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--soft), #a79fff);
  color: var(--deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.rfq-hero h1 {
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 5px;
}
.rfq-hero > p {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 18px;
  max-width: 34ch;
}
.rfq-pop-head {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 9px;
}

/* Three translucent tiles. On the phone they are an even 3-up; the label sits
   above the picture, as in the capture. */
.rfq-pop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rfq-pop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 8px 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #fff;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.rfq-pop-card:hover,
.rfq-pop-card:focus-visible { background: rgba(255, 255, 255, .18); }
.rfq-pop-card:active { transform: scale(.98); }
.rfq-pop-card .rfq-pop-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, .92);
  /* Two lines, then clip — "Personalización de empaque" must not push the tile
     taller than its neighbours and break the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 29px;
}
.rfq-pop-card img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  border-radius: 7px;
}
.rfq-pop-ico { display: grid; place-items: center; height: 54px; }

.rfq-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.rfq-hero-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- "Tell us what you need" --------------------------------------- */
.rfq-tell {
  margin: 0 -16px;
  padding: 18px;
  background: linear-gradient(180deg, #332bb8 0%, var(--violet) 100%);
  color: #fff;
}
.rfq-tell h2 {
  font-size: 17px;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
/* The hint block and the textarea are one visual card: the label sits on top as
   the empty state, and the textarea underneath carries the actual value. */
.rfq-tell-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px 12px 0 0;
  background: #fff;
  cursor: text;
}
.rfq-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1.5px dashed #c9c7dd;
  border-radius: 9px;
  color: var(--gray);
  font-size: 22px;
  line-height: 1;
}
.rfq-tell-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray);
}
.rfq-quick {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0 0 12px 12px;
  padding: 0 14px 14px;
  font: 15px/1.5 var(--body);
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.rfq-quick:focus { outline: 0; }
.rfq-tell-box:focus-within { box-shadow: none; }

.rfq-ai {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.rfq-ai input { width: 20px; height: 20px; accent-color: #fff; flex: none; }
.rfq-ai > span { display: inline-flex; align-items: center; gap: 8px; }

/* The CTA inverts: white on purple, so it is the brightest thing on the panel.
   Alibaba's is orange here; ours cannot be. */
.rfq-tell .rfq-cta,
.rfq-tell .btn.primary.rfq-cta {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(12, 6, 60, .25);
}
.rfq-tell .rfq-cta:hover { background: #f3f2ff; }

/* ---------- browsing-history rail ----------------------------------------- */
.rfq-history { padding: 22px 0 6px; }
.rfq-history h2 {
  font-size: 18px;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.rfq-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rfq-hist-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px;
  border-radius: 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.rfq-hist-card small { font-size: 11.5px; color: var(--gray); }
.rfq-hist-card b {
  font-size: 14.5px;
  margin: 3px 0 6px;
  line-height: 1.25;
}
.rfq-hist-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--violet);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rfq-hist-thumbs { display: flex; gap: 6px; margin-bottom: 11px; }
.rfq-hist-thumbs img {
  width: 50%;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}
.rfq-hist-card > a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rfq-disclosure {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- desktop ------------------------------------------------------- */
@media (min-width: 900px) {
  .rfq-hero, .rfq-tell { margin: 0; border-radius: 16px; }
  .rfq-hero { padding: 26px 32px 30px; margin-top: 18px; }
  .rfq-hero h1 { font-size: 30px; max-width: 18ch; }
  .rfq-hero > p { font-size: 15px; }
  .rfq-pop { max-width: 560px; }
  .rfq-pop-card img { height: 78px; }
  .rfq-pop-card .rfq-pop-label { font-size: 13px; }
  .rfq-tell { margin-top: 14px; padding: 26px 32px; }
  .rfq-tell h2 { font-size: 20px; }
  .rfq-tell .rfq-cta { max-width: 320px; }
  .rfq-history-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rfq-pop-card { transition: none; }
}