/* Andromeda aggregator landing pages — supplementary styles
 * Sits on top of ../css/andromeda.css. Adds aggregator-specific visual
 * mockups and per-page accent tweaks for the four marketplace pages
 * (Uber Eats, Deliveroo, Just Eat, Foodhub).
 */

/* ===== Page ribbons — extra warm amber for Foodhub ===== */
.ribbon-amber { background: linear-gradient(90deg, #f6a552 0%, rgba(246, 165, 82, 0.3) 100%); }
.accent-amber::before { background: #f6a552; }

/* ===== FAQ — bridge JS ↔ CSS class mismatch ===== */
.faq-item.is-open .faq-question::after { transform: rotate(45deg); }
.faq-item.is-open .faq-answer { max-height: 600px; padding-top: 14px; }
.faq-item .faq-answer p { margin: 0; }

/* ===== Shared mockup frame ===== */
.mockup-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 520px;
  margin: 0 auto;
}
.mockup-caption {
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ===== Split layout for mockup beside copy ===== */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-row .split-copy h2 { margin-bottom: 18px; }
.split-row .split-copy p { color: var(--muted); line-height: 1.8; }
@media (max-width: 860px) {
  .split-row { grid-template-columns: 1fr; gap: 32px; }
  .mockup-frame { padding: 20px; }
}

/* ===== Comparison tables ===== */
.compare-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Raleway', sans-serif;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare-table thead th {
  background: var(--navy);
  color: var(--white);
  padding: 16px;
  text-align: left;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 0.92rem;
}
.compare-table thead th.highlight {
  background: var(--yellow);
  color: var(--navy);
}
.compare-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .check { color: var(--green); font-weight: 700; }
.compare-table .cross { color: var(--coral); font-weight: 700; }
.compare-table .partial { color: #d69c2a; font-weight: 600; }
.compare-table tbody td.highlight {
  background: #fffbe6;
  font-weight: 600;
  color: var(--navy);
}
.compare-table tbody tr:first-child td:first-child { font-weight: 600; color: var(--navy); }

/* ===== Aggregator quote card ===== */
.aggregator-quote {
  background: var(--cream);
  border-left: 4px solid var(--yellow);
  padding: 28px 32px;
  border-radius: var(--radius);
  max-width: 780px;
  margin: 0 auto;
}
.aggregator-quote blockquote {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.6;
  margin: 0 0 16px;
}
.aggregator-quote .attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}
.aggregator-quote .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
  font-weight: 700;
}
.aggregator-quote.accent-coral { border-left-color: var(--coral); }
.aggregator-quote.accent-sky { border-left-color: var(--sky); }
.aggregator-quote.accent-purple { border-left-color: var(--purple); }
.aggregator-quote.accent-green { border-left-color: var(--green); }
.aggregator-quote.accent-amber { border-left-color: #f6a552; }

/* ===== Channel margin band — used as a soft footer band on each page ===== */
.channel-margin {
  background: linear-gradient(135deg, #f7faff 0%, #fff8e6 100%);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  border: 1px solid var(--border);
}
.channel-margin h3 {
  font-family: 'Poppins';
  color: var(--navy);
  margin: 0 0 12px;
  font-size: 1.45rem;
}
.channel-margin p { color: var(--muted); line-height: 1.7; margin: 0; }
.channel-margin .channel-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.channel-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  gap: 12px;
  align-items: center;
  font-family: 'Poppins';
  font-size: 0.88rem;
  color: var(--navy);
}
.channel-bar-track {
  height: 14px;
  background: rgba(0, 0, 69, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.channel-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), #ffcb3c);
  border-radius: 8px;
}
.channel-bar-fill.dim { background: linear-gradient(90deg, #cdd5e0, #b6bfcd); }
.channel-bar-fill.boost { background: linear-gradient(90deg, var(--green), #18d878); }
.channel-bar-value { text-align: right; font-weight: 600; }
@media (max-width: 860px) {
  .channel-margin { grid-template-columns: 1fr; padding: 24px; }
}

/* ===== UBER EATS — Acceptance dashboard mockup ===== */
.uber-dash {
  background: #0a0e14;
  border-radius: var(--radius-lg);
  padding: 22px;
  color: var(--white);
}
.uber-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.uber-dash-title {
  font-family: 'Poppins';
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.uber-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #06c167;
  box-shadow: 0 0 0 0 rgba(6, 193, 103, 0.7);
  animation: uberPulse 2s infinite;
}
@keyframes uberPulse {
  0% { box-shadow: 0 0 0 0 rgba(6, 193, 103, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(6, 193, 103, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 193, 103, 0); }
}
.uber-dash-time {
  font-family: 'Poppins';
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
}
.uber-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.uber-metric {
  background: rgba(255,255,255,0.05);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
}
.uber-metric .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}
.uber-metric .value {
  font-family: 'Poppins';
  font-size: 1.6rem;
  font-weight: 700;
  margin: 4px 0;
  color: #06c167;
}
.uber-metric .delta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}
.uber-orderlog {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius);
  padding: 14px;
  font-family: 'Poppins';
  font-size: 0.82rem;
}
.uber-orderlog-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: rgba(255,255,255,0.7);
}
.uber-orderlog-row strong { color: #06c167; }
.uber-orderlog-row .accept { color: var(--white); }

/* ===== DELIVEROO — Item availability mockup ===== */
.deliveroo-availability {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deliveroo-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.deliveroo-item.off { opacity: 0.55; background: #fff7f7; border-color: #ffd7d7; }
.deliveroo-item-img {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00ccbc 0%, #00a89a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.deliveroo-item.off .deliveroo-item-img { background: linear-gradient(135deg, #999 0%, #777 100%); }
.deliveroo-item-name {
  font-family: 'Poppins';
  color: var(--navy);
  font-weight: 500;
}
.deliveroo-item-name small { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.deliveroo-toggle {
  width: 46px; height: 26px;
  background: #00ccbc;
  border-radius: 99px;
  position: relative;
  cursor: pointer;
}
.deliveroo-toggle::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: all 0.2s;
}
.deliveroo-item.off .deliveroo-toggle { background: #d8d8d8; }
.deliveroo-item.off .deliveroo-toggle::after { right: auto; left: 3px; }
.deliveroo-sync-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-top: 14px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-family: 'Poppins';
  font-size: 0.82rem;
}
.deliveroo-sync-bar strong { color: #00ccbc; }

/* ===== JUST EAT — Order ingestion mockup ===== */
.justeat-stream {
  background: var(--light);
  border-radius: var(--radius);
  padding: 18px;
}
.justeat-stream-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.justeat-stream-head h3 {
  font-family: 'Poppins';
  color: var(--navy);
  margin: 0;
  font-size: 1.05rem;
}
.justeat-pill {
  background: #ff8000;
  color: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Poppins';
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.justeat-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.justeat-stage {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--white);
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.justeat-stage-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #ff8000;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Poppins';
}
.justeat-stage-icon.done { background: var(--green); }
.justeat-stage-icon.live { background: var(--yellow); color: var(--navy); animation: justeatPulse 1.5s infinite; }
@keyframes justeatPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.justeat-stage-text {
  font-family: 'Poppins';
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 500;
}
.justeat-stage-text small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
  margin-top: 2px;
}
.justeat-noTablet {
  text-align: center;
  margin-top: 14px;
  padding: 10px;
  background: var(--cream);
  border-radius: var(--radius);
  font-family: 'Poppins';
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.justeat-noTablet em { color: var(--coral); font-style: normal; }

/* ===== FOODHUB — Channel cost compare mockup ===== */
.foodhub-fees {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foodhub-fee-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  gap: 12px;
  align-items: center;
  background: var(--light);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: 'Poppins';
  font-size: 0.9rem;
}
.foodhub-channel {
  font-weight: 600;
  color: var(--navy);
}
.foodhub-fee-bar {
  height: 16px;
  background: rgba(0,0,69,0.06);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.foodhub-fee-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #f6a552, #f08029);
}
.foodhub-fee-fill.high { background: linear-gradient(90deg, var(--coral), #c94747); }
.foodhub-fee-fill.low { background: linear-gradient(90deg, var(--green), #18d878); }
.foodhub-fee-value {
  text-align: right;
  font-weight: 600;
  color: var(--navy);
}
.foodhub-take {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-family: 'Poppins';
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foodhub-take strong { color: var(--yellow); }

/* ===== Common: ranking-style score panel ===== */
.rank-panel {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  text-align: center;
  margin-top: 16px;
}
.rank-panel div strong {
  display: block;
  font-family: 'Poppins';
  color: var(--navy);
  font-size: 1.4rem;
}
.rank-panel div span {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .uber-metric-grid { grid-template-columns: 1fr; }
  .channel-bar-row { grid-template-columns: 80px 1fr 60px; font-size: 0.8rem; }
  .foodhub-fee-row { grid-template-columns: 80px 1fr 60px; font-size: 0.82rem; }
}

/* ============================================================
   Marketplace deep-dive cards (hub page)
   ============================================================ */
.marketplace-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.marketplace-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(20, 28, 58, 0.08);
  box-shadow: 0 6px 18px rgba(20, 28, 58, 0.06);
  color: var(--navy);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.marketplace-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--yellow);
}
.marketplace-card.card-green::before  { background: var(--green, #2ea06b); }
.marketplace-card.card-sky::before    { background: var(--sky, #4fb3d9); }
.marketplace-card.card-coral::before  { background: var(--coral, #ef6a57); }
.marketplace-card.card-amber::before  { background: #e7a13a; }
.marketplace-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(20, 28, 58, 0.10);
}
.marketplace-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7088);
}
.marketplace-card h3 {
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.25;
}
.marketplace-card p {
  margin: 0;
  color: var(--muted, #505670);
  font-size: 0.95rem;
  line-height: 1.5;
}
.marketplace-cta {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.92rem;
}
.marketplace-card.card-green  .marketplace-cta { color: var(--green, #2ea06b); }
.marketplace-card.card-sky    .marketplace-cta { color: #2f8aaa; }
.marketplace-card.card-coral  .marketplace-cta { color: var(--coral, #d94f3d); }
.marketplace-card.card-amber  .marketplace-cta { color: #b5791e; }