/* ===========================================================================
   Secure Document Upload  (/upload/)  —  premium, trustworthy upload experience.
   Scoped to .oc-upload-* so it never touches the rest of the theme.
   Brand tokens from main.css :root (--oc-navy, --oc-gold, --oc-cream, …).
   =========================================================================== */

.oc-upload {
  --oc-up-radius: 16px;
  --oc-up-line: rgba(199, 162, 75, .45);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.oc-upload-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 82% -20%, #2a4f74 0%, #1b3a5c 45%, #0f2236 100%);
  color: var(--oc-cream);
  padding: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(2.75rem, 7vw, 4rem);
}
.oc-upload-hero::after { /* thin gold baseline */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--oc-gold), transparent);
  opacity: .7;
}
.oc-upload-hero .oc-container { position: relative; z-index: 1; }
.oc-upload-shield {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(199, 162, 75, .14); border: 1px solid var(--oc-up-line);
  margin-bottom: 1rem;
}
.oc-upload-shield svg { width: 28px; height: 28px; color: var(--oc-gold); }
.oc-upload-eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oc-gold-light, #d8b86a); margin: 0 0 .5rem;
}
.oc-upload-title {
  font-family: var(--oc-font-serif, Georgia, serif);
  font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1.05;
  font-size: clamp(2rem, 5.2vw, 3rem); margin: 0;
}
.oc-upload-hero-sub {
  margin: .9rem 0 0; max-width: 34rem; line-height: 1.5;
  color: rgba(245, 237, 216, .82); font-size: 1.05rem;
}

/* ── Body layout ──────────────────────────────────────────────────────────── */
.oc-upload-wrap { max-width: 660px; margin: 0 auto; padding: clamp(1.75rem, 5vw, 2.75rem) 1.25rem 4rem; }
.oc-upload-greet { font-size: 1.2rem; color: var(--oc-navy-deep, #0f2236); margin: 0 0 1.25rem; }
.oc-upload-greet strong { font-weight: 700; }

/* ── Checklist card ───────────────────────────────────────────────────────── */
.oc-upload-card {
  background: #fff; border: 1px solid var(--oc-cream-dark, #e8d9b8);
  border-radius: var(--oc-up-radius); box-shadow: 0 6px 24px rgba(15, 34, 54, .07);
  padding: 1.4rem 1.5rem; margin: 0 0 1.5rem;
}
.oc-upload-card h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oc-text-muted, #6b7a8d); margin: 0 0 .9rem;
}
.oc-upload-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.oc-upload-list li { display: flex; align-items: center; gap: .7rem; font-size: 1.02rem; color: var(--oc-text, #1a1a2e); }
.oc-upload-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--oc-gold); color: var(--oc-gold); background: rgba(199,162,75,.08);
  font-size: 13px; font-weight: 700;
}
.oc-upload-list li.is-received .oc-upload-tick { border-color: #15803d; color: #fff; background: #15803d; }
.oc-upload-list li.is-received { color: #15803d; }
.oc-upload-list li .lbl small { color: var(--oc-text-muted, #6b7a8d); font-style: normal; }
.oc-upload-due { margin: 1rem 0 0; font-size: .88rem; color: var(--oc-text-muted, #6b7a8d); }

/* ── Dropzone ─────────────────────────────────────────────────────────────── */
.oc-dropzone {
  position: relative; display: block; text-align: center; cursor: pointer;
  border: 2px dashed var(--oc-up-line); border-radius: var(--oc-up-radius);
  background: linear-gradient(180deg, rgba(245,237,216,.35), rgba(245,237,216,.15));
  padding: clamp(1.75rem, 6vw, 2.75rem) 1.25rem; transition: .18s ease;
}
.oc-dropzone:hover { border-color: var(--oc-gold); background: rgba(245,237,216,.5); }
.oc-dropzone:focus-within { outline: 3px solid rgba(199,162,75,.35); outline-offset: 2px; }
.oc-dropzone.is-drag {
  border-color: var(--oc-gold); background: rgba(199,162,75,.16);
  transform: translateY(-1px); box-shadow: 0 8px 26px rgba(15,34,54,.10);
}
.oc-dropzone-icon {
  width: 52px; height: 52px; margin: 0 auto .75rem; color: var(--oc-gold);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(199,162,75,.12);
}
.oc-dropzone.is-drag .oc-dropzone-icon { transform: scale(1.06); }
.oc-dropzone-icon svg { width: 26px; height: 26px; }
.oc-dropzone-title { display: block; font-weight: 700; color: var(--oc-navy-deep, #0f2236); font-size: 1.08rem; }
.oc-dropzone-title .oc-dz-link { color: var(--oc-gold); text-decoration: underline; text-underline-offset: 2px; }
.oc-dropzone-sub { display: block; margin: .4rem auto 0; max-width: 24rem; font-size: .88rem; line-height: 1.4; color: var(--oc-text-muted, #6b7a8d); }
.oc-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ── Selected-file chips (rendered by oc-doc-upload.js) ────────────────────── */
.oc-file-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.oc-file-chip {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
  background: #fff; border: 1px solid var(--oc-cream-dark, #e8d9b8); border-radius: 10px;
  animation: oc-chip-in .18s ease;
}
@keyframes oc-chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.oc-file-chip .fi { flex: 0 0 auto; width: 22px; height: 22px; color: var(--oc-navy-mid, #2a4f74); }
.oc-file-chip .fn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; color: var(--oc-text, #1a1a2e); }
.oc-file-chip .fs { flex: 0 0 auto; font-size: .78rem; color: var(--oc-text-muted, #6b7a8d); }
.oc-file-chip.is-done .fs { color: #15803d; font-weight: 600; }
.oc-file-chip .spin { width: 15px; height: 15px; border: 2px solid rgba(199,162,75,.35); border-top-color: var(--oc-gold); border-radius: 50%; animation: oc-spin .7s linear infinite; }
@keyframes oc-spin { to { transform: rotate(360deg); } }

/* oc-firebase-upload.js status line — keep, but restyle to match. */
.oc-dropzone + .oc-fb-status, .oc-upload-form .oc-fb-status { display: block; font-size: .82rem; margin: .6rem 0 0; min-height: 1em; }

/* ── Submit + trust ───────────────────────────────────────────────────────── */
.oc-upload-actions { margin-top: 1.5rem; }
.oc-upload-actions .oc-btn { width: 100%; justify-content: center; font-size: 1.05rem; padding: .95rem 1.5rem; }
.oc-upload-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--oc-cream-dark, #e8d9b8);
  font-size: .82rem; color: var(--oc-text-muted, #6b7a8d);
}
.oc-upload-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.oc-upload-trust svg { width: 15px; height: 15px; color: var(--oc-gold); flex: 0 0 auto; }

/* ── Success + dead-link states ───────────────────────────────────────────── */
.oc-upload-status-card {
  text-align: center; background: #fff; border: 1px solid var(--oc-cream-dark, #e8d9b8);
  border-radius: var(--oc-up-radius); box-shadow: 0 6px 24px rgba(15,34,54,.07);
  padding: 2.5rem 1.75rem;
}
.oc-upload-status-icon {
  width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.oc-upload-status-icon.ok { background: rgba(21,128,61,.10); color: #15803d; }
.oc-upload-status-icon.dead { background: rgba(199,162,75,.14); color: var(--oc-gold); }
.oc-upload-status-icon svg { width: 34px; height: 34px; }
.oc-upload-status-card h2 { font-family: var(--oc-font-serif, Georgia, serif); font-size: 1.5rem; color: var(--oc-navy-deep, #0f2236); margin: 0 0 .6rem; }
.oc-upload-status-card p { color: var(--oc-text-mid, #3d4a5c); margin: 0 auto .5rem; max-width: 30rem; line-height: 1.55; }
.oc-upload-status-card .oc-btn { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .oc-dropzone, .oc-dropzone-icon, .oc-file-chip, .spin { transition: none; animation: none; }
}