/* esign.css — shared Acrobat-Sign-look chrome + DFD document styling for the
   public e-sign clone (ADR 0117). Loaded by every form page; the form-specific
   document body lives in each *.html. */

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family:'Adobe Clean','Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:#e4e6e8; color:#2c2c2c;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}

/* 1. Top chrome bar */
.ac-top { flex:0 0 auto; height:52px; background:#2c2e33; color:#fff;
  display:flex; align-items:center; padding:0 18px; gap:11px; z-index:40; }
.ac-logo { width:26px; height:26px; border-radius:5px; background:var(--accent,#1a3a5c);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ac-logo svg { width:15px; height:15px; fill:#fff; }
.ac-brand { font-size:15px; font-weight:600; letter-spacing:.1px; }
.ac-brand small { font-weight:400; opacity:.6; }
.ac-help { margin-left:auto; width:26px; height:26px; border-radius:50%;
  border:1px solid #6a6d73; color:#c9ccd1; display:flex; align-items:center;
  justify-content:center; font-size:14px; }

/* 2. Sub toolbar */
.ac-tools { flex:0 0 auto; height:44px; background:#f6f6f7; border-bottom:1px solid #d3d5d9;
  display:flex; align-items:center; padding:0 20px; z-index:30; position:relative; }
.ac-options { font-size:13px; color:#42454a; display:flex; align-items:center; gap:5px;
  cursor:pointer; padding:5px 8px; border-radius:3px; }
.ac-options:hover { background:#eaebed; }
.ac-title { position:absolute; left:0; right:0; text-align:center; font-size:13px;
  color:#42454a; pointer-events:none; }
.ac-next { margin-left:auto; display:flex; align-items:center; gap:9px;
  font-size:13px; color:#5a6b7b; cursor:pointer; }
.ac-next:hover { color:#1473e6; }
.ac-badge { min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:#efc84a; color:#3a3000; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.ac-badge.done { background:#3ab24a; color:#fff; }

/* 3. Document canvas */
.ac-canvas { flex:1 1 auto; overflow-y:auto; overflow-x:auto; position:relative; padding:26px 0 90px; }
.page { width:816px; min-height:1056px; margin:0 auto 26px; background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.28); position:relative; }

/* DFD document styling (mirrors the baked/signed PDF) */
.header { background:var(--accent,#1a3a5c); padding:16px 30px 13px; display:flex; align-items:center; gap:16px; }
.header-logo { height:60px; width:auto; background:#fff; padding:6px 11px; border-radius:5px; }
.header-text { flex:1; color:#fff; }
.header-tagline { font-size:12px; opacity:.85; }
.header-contact { text-align:right; color:#fff; font-size:10px; opacity:.85; line-height:1.6; }
.title-bar { background:var(--accent-light,#e8f0f8); border-bottom:2.5px solid var(--accent,#1a3a5c); padding:9px 30px; text-align:center; }
.title-bar h1 { font-size:13px; font-weight:700; color:var(--accent,#1a3a5c); letter-spacing:.8px; text-transform:uppercase; }
.title-bar p { font-size:9.5px; color:#555; margin-top:2px; }
.form-body { padding:20px 30px 26px; }
.section-header { background:var(--accent,#1a3a5c); color:#fff; font-size:10px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; padding:5px 10px; margin:18px 0 12px; border-radius:2px; }
.section-header:first-child { margin-top:2px; }

/* Field rows */
.row { display:flex; gap:22px; margin-bottom:15px; }
.fld { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.fld label { font-size:9.5px; font-weight:600; color:#555; letter-spacing:.2px; }

/* Acrobat-style input: warm-yellow required, pale-blue optional */
.ip { position:relative; }
.ip input, .ip select {
  width:100%; height:30px; font-size:12.5px; font-family:inherit; color:#1a2733;
  background:#e9f2fb; border:1px solid #b7c7d8; border-radius:2px; padding:0 8px; outline:none; appearance:none; }
.ip.req input, .ip.req select { background:#fbf3c6; border-color:#e2ca6a; padding-left:16px; }
.ip select { cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23667'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; padding-right:24px; }
.ip input:focus, .ip select:focus { border-color:#1473e6; box-shadow:0 0 0 2px rgba(20,115,230,.25); background:#fff; }
.ip.filled input, .ip.filled select { background:#f4f9f4; border-color:#9dc9a2; }
.ip .star { position:absolute; left:5px; top:50%; transform:translateY(-50%);
  color:#d0021b; font-size:13px; line-height:1; pointer-events:none; }
.ip.filled .star { display:none; }
textarea.ta { width:100%; min-height:52px; font-size:12.5px; font-family:inherit; color:#1a2733;
  background:#e9f2fb; border:1px solid #b7c7d8; border-radius:2px; padding:6px 8px; outline:none; resize:vertical; }
textarea.ta:focus { border-color:#1473e6; box-shadow:0 0 0 2px rgba(20,115,230,.25); background:#fff; }

/* Yes/No toggle */
.yn { display:flex; height:30px; border:1px solid #e2ca6a; border-radius:2px; overflow:hidden; width:150px; }
.yn button { flex:1; border:0; background:#fbf3c6; font-size:12px; font-family:inherit; cursor:pointer; color:#5a4a10; }
.yn button.on { background:var(--accent,#1a3a5c); color:#fff; }

/* Searchable combobox */
.combo { position:relative; }
.combo-list { position:absolute; left:0; right:0; top:31px; z-index:25; background:#fff;
  border:1px solid #1473e6; border-top:0; max-height:230px; overflow-y:auto;
  box-shadow:0 6px 14px rgba(0,0,0,.16); border-radius:0 0 2px 2px; }
.combo-list div { padding:7px 12px; font-size:12.5px; color:#1a2733; cursor:pointer; }
.combo-list div.active, .combo-list div:hover { background:#e9f2fb; }
.combo-list .none { color:#8a929c; font-style:italic; cursor:default; background:none; }

/* Page 2 clauses (initialed contracts) */
.read-note { color:var(--accent,#1a3a5c); font-weight:700; font-size:10.5px; margin:2px 0 14px; }
.clause { display:flex; gap:13px; margin-bottom:14px; align-items:flex-start; }
.clause-ini { flex:0 0 64px; text-align:center; }
.ini-box { height:34px; border:1px solid #e2ca6a; background:#fbf3c6; border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:#b59a2e; font-size:9px; font-weight:700; letter-spacing:.4px; }
.ini-cap { font-size:7px; color:#aaa; margin-top:3px; text-transform:uppercase; letter-spacing:.4px; }
.clause-body { flex:1; font-size:10px; line-height:1.55; color:#222; }
.clause-body .n { font-weight:700; color:var(--accent,#1a3a5c); }
.sms { margin:14px 0 6px; padding:9px 12px; border:1px solid #c9cfdd; border-radius:4px; background:#f7f8fb; }
.sms p { font-size:9px; line-height:1.45; margin:0; }
.ack { font-size:10px; line-height:1.6; color:#333; margin:8px 0; }
.sig-row { display:flex; gap:30px; margin-top:26px; }
.sig-item { flex:1; }
.sig-item.narrow { flex:0 0 220px; }
.sig-box { height:44px; border:1px solid #e2ca6a; background:#fbf3c6; border-radius:2px;
  display:flex; align-items:center; padding-left:12px; color:#b59a2e; font-size:11px; font-style:italic; }
.sig-lbl { font-size:8.5px; color:#777; margin-top:4px; }
.page-foot { position:absolute; bottom:14px; left:30px; right:30px; display:flex; justify-content:space-between;
  font-size:8.5px; color:#999; border-top:1px solid #eee; padding-top:6px; }

/* Start / Next arrow */
.ac-arrow { position:fixed; z-index:35; height:30px; background:#1473e6; color:#fff;
  font-size:12px; font-weight:600; display:flex; align-items:center; padding:0 12px 0 14px;
  border-radius:3px 0 0 3px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3); white-space:nowrap;
  transition:top .18s ease, left .18s ease; }
.ac-arrow::after { content:""; position:absolute; right:-14px; top:0; border:15px solid transparent;
  border-left:14px solid #1473e6; border-right:0; }
.ac-arrow.hidden { display:none; }

/* 4. Bottom action bar */
.ac-bottom { position:fixed; bottom:0; left:0; right:0; height:58px; background:#fff;
  border-top:1px solid #d3d5d9; display:flex; align-items:center; padding:0 22px; z-index:40; }
.ac-terms { font-size:11px; color:#6b6e73; max-width:70%; line-height:1.4; }
.ac-terms a { color:#1473e6; text-decoration:none; }
.ac-continue { margin-left:auto; background:#1473e6; color:#fff; border:0; border-radius:16px;
  height:34px; padding:0 26px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }
.ac-continue:hover { background:#0d66d0; }
.ac-continue:disabled { opacity:.6; cursor:default; }

/* Pinnacle Auto Rental — clean legal layout (rental_agreement + rental_return),
   matching the real PINNACLEAUTO.CO Documenso form: serif, white header w/ logo,
   faint gray running title, red "Please read and initial", inline label:field rows. */
.page.pin { padding:30px 54px 40px; font-family:'Times New Roman',Georgia,serif; }
.page.pin .run-logo { position:absolute; top:26px; left:54px; height:70px; width:auto; }
.page.pin .run-head { position:absolute; top:48px; left:250px; right:54px; text-align:center; color:#9a9a9a; font-size:12.5px; }
.page.pin .content { margin-top:90px; }
.page.pin .sec-label { font-weight:700; font-size:14px; margin:6px 0 14px; }
.page.pin .read-initial { color:#c0392b; font-weight:700; font-size:13.5px; margin:18px 0 12px; }
.page.pin .dl-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; }
.page.pin .dl-lab { white-space:nowrap; }
.page.pin .dl-row .ip { flex:1; }
.page.pin .dl-row .ip.sm { flex:0 0 108px; }
.page.pin .dl-row .ip.md { flex:0 0 160px; }
.page.pin .clause { display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; }
.page.pin .clause-init { flex:0 0 60px; text-align:center; }
.page.pin .clause-init .ini-box { height:30px; border:1px solid #e2ca6a; background:#fbf3c6; border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:#b59a2e; font-size:8px; font-weight:700; letter-spacing:.3px; }
.page.pin .clause-init .ini-cap { font-size:7.5px; color:#aaa; margin-top:2px; }
.page.pin .clause-body { flex:1; font-size:10.7px; line-height:1.46; }
.page.pin .clause-body .c-title { font-weight:700; font-size:11.5px; margin-bottom:2px; }
.page.pin .clause-body p { margin:3px 0; }
.page.pin .clause-body ul { margin:3px 0 3px 18px; }
.page.pin .sig-inline { display:flex; align-items:center; gap:10px; margin:18px 0 8px; font-size:13px; }
.page.pin .sig-inline .lab { white-space:nowrap; }
.page.pin .sig-inline .sig-box { flex:1; height:38px; }
.page.pin .sig-inline .sig-box.sm { flex:0 0 160px; }
.page.pin .cc-onfile { margin:16px 0 6px; padding:12px 14px; border:1px solid #999; border-radius:4px; background:#fafafa; }
.page.pin .cc-onfile .cc-card { font-weight:700; font-size:13px; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.page.pin .cc-onfile .cc-card .ip { flex:0 0 160px; }
.page.pin .cc-onfile .cc-auth { font-size:10.7px; line-height:1.5; }
.page.pin .vi-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; font-size:13px; }
.page.pin .cond-note { font-size:11.5px; margin:12px 0 8px; }

/* Intro line with an inline blank (vehicle release) */
.intro { font-size:12px; line-height:1.7; color:#222; margin:6px 0 4px; }
.ack { font-size:10.5px; line-height:1.65; color:#333; margin:12px 0; }
.ack strong { color:inherit; }

/* Launcher (index.html) */
.launch { margin:auto; max-width:640px; padding:40px 24px; text-align:center; }
.launch h1 { color:var(--accent,#1a3a5c); font-size:24px; margin-bottom:6px; }
.launch p { color:#555; font-size:14px; margin-bottom:28px; }
.launch .forms { display:flex; flex-direction:column; gap:12px; }
.launch a { display:block; background:#fbf3c6; border:1px solid #e2ca6a; border-radius:6px;
  padding:16px; font-size:15px; font-weight:600; color:var(--accent,#1a3a5c); text-decoration:none; }
.launch a:hover { background:#f6ead0; }