/* rfq-form.css — design system for the Mission RFQ pages.
 * Premium two-pane layout: dark AI hero on top, form (left) + sticky live
 * summary (right) on desktop, single column on mobile. Mobile-first. */

:root {
  --accent: #6366f1;          /* indigo-500 */
  --accent2: #0ea5e9;         /* sky-500   */
  --accent-strong: #4f46e5;   /* indigo-600 */
  --accent-soft: rgba(99, 102, 241, 0.12);
  --ink: #0b1220;             /* near-black headings */
  --body: #44506b;            /* body text */
  --muted: #6b7896;           /* labels */
  --line: #e7ecf3;
  --field-line: #e2e8f0;
}

/* shorthand gradient reused on chips/buttons/badges */
.rfq-grad { background: linear-gradient(135deg, var(--accent), var(--accent2)); }

.rfq-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.25rem 1rem 7rem; /* clears fixed unclassified banner; bottom clears sticky bar */
  color: var(--body);
}
@media (min-width: 768px) {
  .rfq-wrap { padding: 3.5rem 1.5rem 4rem; }
}

/* =================== Dark AI hero =================== */
.rfq-hero {
  position: relative; overflow: hidden;
  border-radius: 28px;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(900px 360px at 6% -25%, rgba(99, 102, 241, 0.50), transparent 60%),
    radial-gradient(720px 420px at 112% -10%, rgba(14, 165, 233, 0.38), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0e1631 100%);
  color: #e8edf6;
  box-shadow: 0 34px 70px -30px rgba(11, 18, 32, 0.65);
}
@media (min-width: 768px) { .rfq-hero { padding: 2.75rem; } }
.rfq-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 50% -10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% -10%, #000, transparent 72%);
}
.rfq-hero > * { position: relative; z-index: 1; }

.rfq-hero h1 {
  color: #fff; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04;
  font-size: clamp(1.9rem, 5vw, 2.7rem); margin-top: 0.9rem;
}
.rfq-hero__sub {
  color: #aeb9d2; font-size: 1.05rem; line-height: 1.55; max-width: 42rem; margin-top: 0.85rem;
}

.rfq-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c7d2fe; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.rfq-eyebrow .dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }

/* DANA glass panel + dropzone (on dark) */
.dana-panel {
  margin-top: 1.5rem; border-radius: 20px; padding: 1.1rem;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.14);
}
.dana-badge {
  width: 3rem; height: 3rem; border-radius: 15px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.65);
}
.dana-panel h3 { color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.dana-panel p.dana-lead { color: #aeb9d2; font-size: 0.95rem; line-height: 1.5; margin-top: 0.25rem; }

.dana-drop {
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  border-radius: 16px; padding: 1.6rem 1rem; text-align: center; cursor: pointer;
  transition: all 0.2s ease; background: rgba(255, 255, 255, 0.03);
}
.dana-drop:hover, .dana-drop.dragover { border-color: var(--accent2); background: rgba(14, 165, 233, 0.10); }
.dana-drop__title { color: #fff; font-size: 1rem; font-weight: 600; }
.dana-drop__title .link { color: #7dd3fc; text-decoration: underline; }
.dana-drop__hint { color: #8896b4; font-size: 0.82rem; margin-top: 0.3rem; }

.dana-status { border-radius: 13px; padding: 0.75rem 0.95rem; font-size: 0.92rem; font-weight: 500; }

.dana-file {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e8edf6;
}
.dana-file .name { font-size: 0.82rem; font-weight: 500; color: #fff; }
.dana-file .meta { font-size: 0.72rem; color: #8896b4; }
.dana-file .x { color: #fca5a5; cursor: pointer; font-weight: 700; flex: 0 0 auto; }

/* =================== Two-column working area =================== */
.rfq-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.25rem;
}
@media (min-width: 1024px) {
  .rfq-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 1.5rem; align-items: start; }
}
.rfq-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* =================== Section cards =================== */
.rfq-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 1.35rem; box-shadow: 0 6px 22px rgba(11, 18, 32, 0.05);
}
@media (min-width: 768px) { .rfq-card { padding: 1.65rem; } }

.rfq-card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; }
.rfq-step {
  width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-size: 0.92rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.55);
}
.rfq-card__title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

/* labels & inputs */
.field-label {
  display: block; font-size: 0.9rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0; text-transform: none; margin: 0 0 0.4rem 0.1rem;
}
.field-input {
  width: 100%; height: 3.4rem; border-radius: 0.95rem;
  padding: 0 1.15rem; font-weight: 500; font-size: 1.05rem;
}
.rfq-req { color: var(--accent); }

/* repeatable rows: stacked card on phone, columns on md+ */
.rfq-rows-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.rfq-add {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.86rem; font-weight: 700; color: var(--accent-strong); cursor: pointer; white-space: nowrap;
  padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--accent-soft);
}
.rfq-add:hover { background: rgba(99, 102, 241, 0.18); }

.rfq-row {
  display: grid; grid-template-columns: 1fr; gap: 0.6rem;
  border: 1px solid #eef2f7; border-radius: 16px; padding: 0.85rem; margin-bottom: 0.7rem; position: relative;
}
@media (min-width: 768px) {
  .rfq-row { grid-template-columns: var(--rfq-cols, 1fr 1fr 80px 2.4rem); align-items: center; gap: 0.5rem; border: 0; padding: 0; margin-bottom: 0.5rem; }
}
.rfq-cell-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: 0.3rem; }
@media (min-width: 768px) { .rfq-cell-label { display: none; } }
.rfq-row input { width: 100%; height: 3.1rem; border-radius: 12px; padding: 0 0.95rem; font-weight: 500; font-size: 1rem; }
.rfq-del {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #94a3b8; font-weight: 700; font-size: 0.9rem;
  position: absolute; top: 0.5rem; right: 0.5rem;
}
@media (min-width: 768px) { .rfq-del { position: static; } }
.rfq-del:hover { background: #fee2e2; color: #ef4444; }

.rfq-totals { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.9rem; font-weight: 600; color: var(--body); margin-left: 0.1rem; padding-top: 0.5rem; }
.rfq-totals b { color: var(--accent-strong); font-weight: 800; }
.rfq-empty { font-size: 0.92rem; color: #94a3b8; margin-left: 0.1rem; }

/* =================== Sticky live summary =================== */
.rfq-summary {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 1.5rem;
  box-shadow: 0 12px 34px rgba(11, 18, 32, 0.07);
}
@media (min-width: 1024px) { .rfq-summary { position: sticky; top: 5.5rem; } }

.rfq-summary__title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rfq-summary__program { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-top: 0.35rem; word-break: break-word; }
.rfq-summary__loc { font-size: 0.92rem; color: var(--body); margin-top: 0.25rem; }

.rfq-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.1rem 0; }
.rfq-stat { border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 0.85rem; background: #fbfcfe; }
.rfq-stat .n { font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rfq-stat .l { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.3rem; }

.rfq-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid #f1f5f9; font-size: 0.9rem; }
.rfq-sum-row .k { color: var(--muted); font-weight: 600; }
.rfq-sum-row .v { color: var(--ink); font-weight: 600; text-align: right; }

.rfq-summary__note { font-size: 0.78rem; color: #94a3b8; text-align: center; margin-top: 0.85rem; line-height: 1.4; }

/* the summary's own submit + note only show on desktop; mobile uses the sticky bar */
.rfq-summary__submit { display: none; }
@media (min-width: 1024px) { .rfq-summary__submit { display: block; } }

/* payment option buttons */
.rfq-pay {
  height: 3.5rem; border-radius: 1rem; padding: 0 1rem; font-weight: 600; font-size: 0.92rem;
  border: 1.5px solid var(--field-line); background: #fff; color: var(--body); transition: all 0.15s ease;
}
.rfq-pay:hover { border-color: #cbd5e1; }
.rfq-pay.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.rfq-pay.is-on-amber { border-color: #f59e0b; background: #fffbeb; color: #b45309; }

/* =================== Submit button (shared) =================== */
.rfq-submit {
  width: 100%; height: 3.65rem; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  box-shadow: 0 12px 26px -8px rgba(99, 102, 241, 0.6); transition: all 0.2s ease;
}
.rfq-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rfq-submit:disabled { opacity: 0.55; transform: none; box-shadow: none; }

/* sticky bottom bar — mobile/tablet only */
.rfq-submitbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
  border-top: 1px solid #e2e8f0; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
}
.rfq-submitbar__inner { max-width: 720px; margin: 0 auto; }
@media (min-width: 1024px) { .rfq-submitbar { display: none; } }