/* Upload page and the waiting screen. Loaded last. */

/* ---------- upload: two columns, form on the left, the promise on the right ---------- */
.up { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .up { grid-template-columns: 1fr 360px; gap: 28px; } }
.up-main { background: #fff; border-radius: 18px; padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px rgba(0, 47, 90, .07); animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.up-title { font-size: clamp(26px, 3.6vw, 34px); margin-top: 16px; }
.up-lead { font-size: 16px; margin-top: 6px; }
.up-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.up-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #eef2f7;
  color: var(--ink-3); font-size: 13px; font-weight: 700; transition: background .3s, color .3s; }
.up-steps li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d6dee9; color: #fff; font-size: 12px; transition: background .3s; }
.up-steps li.on { background: var(--blue-soft); color: var(--blue-dark); }
.up-steps li.on b { background: var(--blue); }
.up .label { margin-top: 22px; }

/* the drop zone: marching dashes, a floating file, a real button inside */
.drop2 { position: relative; display: block; border-radius: 16px; padding: 30px 20px; text-align: center; cursor: pointer;
  background:
    linear-gradient(#f7fbff, #f7fbff) padding-box,
    repeating-linear-gradient(90deg, #8fbbe6 0 12px, transparent 12px 22px) border-box;
  border: 2px solid transparent; transition: background .2s, transform .2s; }
.drop2:hover { transform: translateY(-1px); background: linear-gradient(#eef6ff, #eef6ff) padding-box, repeating-linear-gradient(90deg, #0072ce 0 12px, transparent 12px 22px) border-box; }
.drop2.over { background: linear-gradient(#e3f0fd, #e3f0fd) padding-box, linear-gradient(#0072ce, #0072ce) border-box; transform: scale(1.01); }
.drop2 input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop2-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drop2-ico { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 22px; margin-bottom: 8px; color: var(--blue);
  background: #fff; box-shadow: 0 8px 20px rgba(0, 87, 158, .14); animation: float 3s ease-in-out infinite; }
.drop2-title { font-weight: 800; font-size: 17px; color: var(--ink); }
.drop2-hint { font-size: 13.5px; color: var(--ink-3); }
.drop2-btn { margin-top: 12px; padding: 9px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; }
.drop2.has { padding: 16px; background: linear-gradient(#effaf5, #effaf5) padding-box, linear-gradient(#0aa678, #0aa678) border-box; animation: got .4s ease; }
.drop2-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; text-align: left; }
.file-ico { display: grid; place-items: center; width: 46px; height: 54px; border-radius: 8px; background: #fff; color: #c2410c; font-weight: 900; font-size: 12px;
  box-shadow: inset 0 0 0 2px #fed7aa; flex: none; }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-meta b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { color: var(--ink-3); font-size: 13px; }
.file-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0aa678; color: #fff; animation: pop .4s ease both; }
.file-change { font-size: 13px; font-weight: 700; color: var(--blue); }

.up textarea { min-height: 64px; }
.up .suggest button { transition: transform .12s, background .15s, border-color .15s, color .15s; }
.up .suggest button:active { transform: scale(.94); }
.up .suggest button.on { animation: pop .3s ease; }

/* a real checkbox, drawn */
.check2 { position: relative; display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check2 input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check2 .box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #b9c4d3; background: #fff; transition: background .15s, border-color .15s; position: relative; }
.check2 .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.check2 input:checked + .box { background: var(--blue); border-color: var(--blue); }
.check2 input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check2 input:focus-visible + .box { outline: 3px solid #9ec5ff; outline-offset: 2px; }
.up-go { margin-top: 22px; }

/* the right column */
.up-side { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 24px; color: #fff;
  background: linear-gradient(160deg, #0a5fae, #0072ce 55%, #2a8de0); animation: rise .6s .1s cubic-bezier(.2, .7, .2, 1) both; }
.up-side::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.up-side .motif { max-width: 260px; margin: 0 auto 6px; }
.up-side h2 { margin: 8px 0 0; font: 700 21px/1.25 var(--display); letter-spacing: -0.02em; }
.up-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.up-points li { position: relative; padding-left: 30px; font-size: 15px; color: #e3f0fd; animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.25s + var(--i) * 90ms); }
.up-points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.up-points li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.up-price { position: relative; z-index: 1; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; color: #d5e8fa; }
.up-price b { font: 700 22px/1 var(--display); color: #fff; margin-right: 6px; }
@media (max-width: 899px) { .up-side { order: -1; padding: 20px; } .up-side .motif { max-width: 200px; } .up-points { grid-template-columns: 1fr 1fr; gap: 8px 14px; } .up-points li { font-size: 13.5px; } }
@media (max-width: 480px) { .up-points { grid-template-columns: 1fr; } }

/* ---------- waiting screen ---------- */
.work2 { text-align: center; padding: 18px 0 6px; }
.work2-stage { position: relative; width: min(360px, 90%); margin: 0 auto; }
.scanning .m-doc { animation: none; }
.scanline { position: absolute; left: 4%; width: 22%; top: 16%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #0072ce, transparent); box-shadow: 0 0 14px #0072ce; animation: scan 1.6s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 16%; } 50% { top: 80%; } }
.work2-title { margin-top: 16px; }
.counter { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; }
.counter b { font: 700 40px/1 var(--display); letter-spacing: -0.04em; color: var(--blue); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.counter span { font: 700 18px/1 var(--display); color: var(--ink-3); }
.counter small { width: 100%; margin-top: 4px; color: var(--ink-3); font-size: 14px; }
.progress2 { height: 8px; max-width: 420px; margin: 16px auto 0; border-radius: 999px; background: #e3e9f1; overflow: hidden; }
.progress2 i { display: block; height: 100%; width: 4%; border-radius: 999px;
  background: linear-gradient(90deg, #0072ce, #4aa3ee, #0072ce); background-size: 200% 100%; animation: sheen 1.4s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.checking { margin: 18px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: #fff; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08); font-size: 14.5px; max-width: 100%; }
.checking > span { color: var(--ink-3); flex: none; }
.checking-win { height: 26px; overflow: hidden; text-align: left; }
.checking-reel { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.checking-reel b { display: block; height: 26px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; font-weight: 700; }
.steps3 { list-style: none; margin: 22px auto 14px; padding: 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.steps3 li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: #eef2f7; color: var(--ink-3); font-size: 13.5px; font-weight: 600; transition: background .3s, color .3s; }
.steps3 li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c3ccd8; transition: background .3s; }
.steps3 li.now { background: var(--blue-soft); color: var(--blue-dark); }
.steps3 li.now::before { background: var(--blue); animation: blink 1s infinite; }
.steps3 li.done { background: #e7f7f0; color: #0b6b4f; }
.steps3 li.done::before { background: #0aa678; }
.work2.finished .scanline { display: none; }

@media (prefers-reduced-motion: reduce) { .drop2-ico, .scanline, .progress2 i { animation: none; } }
/* simpler, even dashed border all round */
.drop2 { background: #f7fbff; border: 2px dashed #9cc4ea; }
.drop2:hover { background: #eef6ff; border-color: var(--blue); }
.drop2.over { background: #e3f0fd; border: 2px solid var(--blue); }
.drop2.has { background: #effaf5; border: 2px solid #0aa678; }
/* on a phone the form comes first; the promise follows it */
@media (max-width: 899px) { .up-side { order: 0; } }

/* "(pole kohustuslik)" in normal weight */
.label .opt { font-weight: 400; color: var(--ink-3); }

/* step bar: done steps get a tick, the current one is blue */
.up-steps li.done { background: #e7f7f0; color: #0b6b4f; }
.up-steps li.done b { background: #0aa678; font-size: 0; }
.up-steps li.done b::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.up-steps li.on:not(.done) { box-shadow: 0 0 0 2px #b9d7f2; }


/* step ticks: a drawn check, centred in its circle */
.up-steps li.done b::after { content: none; }
.up-steps li.done b {
  background: #0aa678 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* the hero keeps one height in every language, so the photo and the example card sit the same
   (a shorter English headline used to shrink it and push the card up over the face) */
@media (min-width: 861px) {
  .hero2 { min-height: 600px; display: flex; align-items: center; }
  .hero2-in { padding-top: 48px; padding-bottom: 170px; }
  .hero-card { bottom: 30px; }
}

/* ---------- upload side: live numbers instead of a sales card ---------- */
.up-side.live { background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--blue);
  border-radius: 14px; box-shadow: none; padding: 22px 22px 20px; align-self: start; }
.up-side.live::after { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #0aa678; box-shadow: 0 0 0 0 rgba(10, 166, 120, .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(10, 166, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 166, 120, 0); } }
.live-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
.live-nums div { padding: 12px 14px; border-radius: 10px; background: #f3f7fc; }
.live-nums b { display: block; font: 700 26px/1.1 var(--display); letter-spacing: -0.02em; color: var(--blue-dark, #00579e); }
.live-nums div + div b { color: #0b8a63; }
.live-nums span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.up-side.live h2 { margin: 20px 0 0; font: 700 14px/1.2 var(--body, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.live-list { list-style: none; margin: 8px 0 0; padding: 0; }
.live-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--i) * 80ms); }
.live-list li b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-list li span { flex: none; color: var(--ink-3); font-size: 13px; }
.live-price { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.live-price b { font: 700 20px/1 var(--display); color: var(--ink); margin-right: 4px; }
.live-trust { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 899px) { .up-side.live { order: 1; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- upload form, plainer: a job-board form, not a landing card ---------- */
.up-main { border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); padding: clamp(20px, 3.4vw, 32px); }
.up-title { margin-top: 0; font-size: clamp(24px, 3vw, 30px); }
.up .label.num { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 15.5px; }
.up .label.num .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: #e8eef5; color: var(--ink-2); font-size: 13px; font-weight: 800; transition: background .2s, color .2s; }
.up .label.num .n.on { background: var(--blue); color: #fff; }
.up .label.num .n.done { background: #0aa678; color: transparent; position: relative; }
.up .label.num .n.done::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.up .field .label.num { margin-top: 26px; }

.drop2 { padding: 18px 20px; border-radius: 10px; text-align: left; transform: none !important;
  background: #f7fafd; border: 1.5px dashed #b8c9dc; }
.drop2:hover { background: #f0f6fd; border-color: var(--blue); }
.drop2.over { background: #e6f1fc; border: 1.5px solid var(--blue); }
.drop2.has { padding: 14px 16px; background: #effaf5; border: 1.5px solid #0aa678; }
.drop2-empty { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; }
.drop2-ico { grid-row: 1 / 3; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blue); }
.drop2-ico svg { width: 34px; height: 34px; }
.drop2-title { font-size: 15.5px; font-weight: 700; }
.drop2-hint { grid-column: 2; font-size: 13px; }
.drop2-btn { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 8px 16px; border-radius: 8px; background: #fff; color: var(--blue-dark, #00579e);
  border: 1.5px solid var(--blue); font-size: 14px; }
.drop2:hover .drop2-btn { background: var(--blue); color: #fff; }
@media (max-width: 520px) {
  .drop2-empty { grid-template-columns: auto 1fr; }
  .drop2-btn { grid-column: 1 / 3; grid-row: 3; margin-top: 10px; text-align: center; }
}

.up .suggest button { border-radius: 6px; padding: 4px 10px; font-size: 13.5px; border-width: 1px; background: #fff; }
.up .suggest button::before { content: "+"; margin-right: 5px; color: var(--ink-3); font-weight: 700; }
.up .suggest button.on::before { content: "✓"; color: var(--blue); }
.up textarea { border-radius: 8px; }
.check2 .box { border-radius: 4px; }
.up-go { border-radius: 10px; }

/* ---------- upload page, one column: the file picker is the page (Smallpdf / iLovePDF pattern) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.up3 { max-width: 760px; margin: 0 auto; padding: 18px 0 10px; text-align: center; }
.up3-title { font-size: clamp(28px, 4vw, 40px); }
.up3-lead { margin: 8px auto 0; max-width: 560px; font-size: 16.5px; }
.up3 form { margin-top: 26px; text-align: left; }
.up3 .drop2 { padding: 46px 20px 40px; border: 0; border-radius: 14px; text-align: center; background: #0072ce; color: #fff;
  box-shadow: 0 10px 30px rgba(0, 87, 158, .22); transition: background .2s, box-shadow .2s, transform .2s; transform: none; }
.up3 .drop2:hover { background: #0066b9; transform: translateY(-2px) !important; box-shadow: 0 16px 36px rgba(0, 87, 158, .28); }
.up3 .drop2.over { background: #00579e; transform: scale(1.01) !important; outline: 3px dashed rgba(255, 255, 255, .7); outline-offset: -12px; }
.up3 .drop2-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.up3 .drop2-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border: 0; border-radius: 10px;
  background: #fff; color: #00579e; font: 700 17px/1 var(--display); letter-spacing: -0.01em; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: transform .15s; }
.up3 .drop2:hover .drop2-btn { background: #fff; color: #00579e; transform: scale(1.03); }
.up3 .drop2-title { margin-top: 10px; font-size: 15px; font-weight: 600; color: #fff; }
.up3 .drop2-hint { font-size: 13px; color: #cfe3f7; }
.up3 .drop2.has { padding: 16px 18px; background: #effaf5; color: var(--ink); box-shadow: none; border: 1.5px solid #0aa678; text-align: left; }
.up3 .drop2.has:hover { transform: none !important; }
.up3 [data-drop-type] { color: #fff !important; }
.up3 .field { margin-top: 26px; }
.up3 .label { margin-top: 0; }
.up3 .suggest button { border-radius: 6px; padding: 4px 10px; font-size: 13.5px; border-width: 1px; background: #fff; }
.up3 .suggest button::before { content: "+"; margin-right: 5px; color: var(--ink-3); font-weight: 700; }
.up3 .suggest button.on::before { content: "✓"; color: var(--blue); }
.up3 textarea { border-radius: 8px; min-height: 60px; }
.up3 .check2 .box { border-radius: 4px; }
.up3 .up-go { border-radius: 10px; margin-top: 20px; }
.up3-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; color: var(--ink-2); }
.up3-trust li { display: inline-flex; align-items: center; gap: 7px; }
.up3-trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: #0aa678 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.500 8.200 7 10.600 11.600 5.600' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.up3-live { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.up3-live b { color: var(--ink); }
@media (max-width: 560px) { .up3 .drop2 { padding: 32px 14px 28px; } .up3 .drop2-btn { padding: 13px 22px; font-size: 16px; } }
.up3 .up3-trust { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* ---------- two columns again: the form on the left, the blue card on the right ---------- */
.up4 { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .up4 { grid-template-columns: 1fr 340px; gap: 36px; } }
.up4 .up3 { max-width: none; margin: 0; padding-top: 6px; text-align: left; }
.up4 .up3-lead { margin-left: 0; }
.up4 .up-side { margin-top: 6px; }
@media (max-width: 899px) { .up4 .up-side { order: 1; } }

/* the file area: see-through glass with a soft blue edge instead of a solid blue block */
.up3 .drop2 { position: relative; color: var(--ink); text-align: center; padding: 40px 20px 34px; border-radius: 18px;
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px dashed rgba(0, 114, 206, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 30px rgba(0, 47, 90, .06); }
.up3 .drop2::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(0, 114, 206, .10), transparent 70%); }
.up3 .drop2:hover { background: rgba(255, 255, 255, .75); border-color: rgba(0, 114, 206, .6); transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 14px 34px rgba(0, 87, 158, .12); }
.up3 .drop2.over { background: rgba(227, 240, 253, .8); border: 1.5px solid #0072ce; outline: 0; transform: scale(1.01) !important; }
.up3 .drop2-btn { background: #0072ce; color: #fff; box-shadow: 0 6px 18px rgba(0, 114, 206, .28); }
.up3 .drop2:hover .drop2-btn { background: #0066b9; color: #fff; }
.up3 .drop2-title { color: var(--ink-2); }
.up3 .drop2-hint { color: var(--ink-3); }
.up3 [data-drop-type] { color: var(--bad) !important; }
.up3 .drop2.has { background: rgba(239, 250, 245, .8); border: 1.5px solid #0aa678; }

.checking[hidden] { display: none; }