/* Verify page, on top of landing.css (the rtrust.org design). */

/* hero: text left, upload card right */
.vf-hero .wrap{align-items:center}
.vf-hero .sub{font-size:17px}
.vf-ticks{margin-top:4px}
.vf-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}

/* the drop area: the real file input covers it, so clicking and dropping both work */
.vf-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:44px 24px;border:2px dashed var(--tint-2);border-radius:20px;background:var(--tint);transition:border-color .2s,background .2s}
.vf-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.vf-drop:hover,.vf-drop.is-over{border-color:var(--navy);background:#e9eeff}
.vf-drop.is-error{border-color:#d93025}
.vf-drop.is-error .vf-drop-s{color:#d93025;font-weight:700}
.vf-drop-ic{width:64px;height:64px;border-radius:18px;background:var(--white);color:var(--navy);display:grid;place-items:center;box-shadow:0 10px 24px -14px rgba(10,20,90,.45)}
.vf-drop-ic svg{width:32px;height:32px}
.vf-drop-t{font-size:19px;color:var(--navy-ink)}
.vf-drop-s{font-size:14.5px;color:var(--muted);word-break:break-word}
.vf-drop-btn{margin-top:6px;pointer-events:none}
.vf-drop:hover .vf-drop-btn{background:var(--yellow-2)}
.vf-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--subtle)}
.vf-lock svg{width:15px;height:15px;display:block}
@media (prefers-reduced-motion:no-preference){
  .vf-drop-ic svg path:last-child{animation:nudge 2.4s ease-in-out infinite}
}

.vf-message{margin:0 auto 40px;max-width:760px;text-align:center;font-weight:700;color:var(--navy-ink)}

/* result dialogs: shown by the server (class "show"), closed by verify.js */
.vf .modal{position:fixed;inset:0;z-index:60;display:none !important;align-items:center;justify-content:center;padding:16px}
.vf .modal.show{display:flex !important}
.vf .modal-dialog{width:min(520px,100%)}
.vf .modal-content{position:relative;background:var(--white);border-radius:var(--r-lg);box-shadow:0 30px 80px -20px rgba(10,20,90,.45);padding:32px 30px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.vf .modal-title{font-size:22px}
.vf-result-ic{width:60px;height:60px;border-radius:50%;background:#e3f7ee;color:var(--green);display:grid;place-items:center}
.vf-result-ic svg{width:30px;height:30px}
.vf-result-ic.is-warn{background:var(--yellow-soft);color:#b88600}
.vf .modal-content p{white-space:pre-line;color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.vf .modal-footer{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;width:100%}
.vf .modal-footer .btn{min-width:130px}
.vf .modal-backdrop{position:fixed;inset:0;z-index:55;background:rgba(11,11,79,.45);backdrop-filter:blur(2px);display:none}
.vf .modal-backdrop.show{display:block}
#Rezultati:not(:has(.modal.show)) .modal-backdrop{display:none}

/* while the document is being checked */
.vf-loading{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(255,255,255,.75);backdrop-filter:blur(3px)}
.vf-loading[hidden]{display:none}
.vf-loading-box{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:999px;padding:16px 26px;box-shadow:var(--shadow);color:var(--navy-ink)}
.vf-loading .spin{width:20px;height:20px;border-width:3px}

/* how it works */
.vf-steps-sec{background:var(--tint)}
.vf-steps{list-style:none;margin:0;padding:0}
.vf-steps .card{gap:12px}
.vf-steps .fi{width:52px;height:52px}

/* "have the document code?" -> sign.rtrust.org/v */
.vf-code{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.vf-or{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--subtle)}
.vf-or::before,.vf-or::after{content:"";flex:1;height:1px;background:var(--line,#e6e8f2)}
.vf-code-l{font-size:14px;color:var(--muted);line-height:1.5}
.vf-code-l b{display:block;font-size:15.5px;color:var(--navy-ink)}
.vf-code-row{display:flex;gap:8px}
.vf-code-in{flex:1;min-width:0;height:48px;padding:0 14px;border:1.5px solid var(--tint-2);border-radius:14px;background:var(--white);font:600 15px/1 inherit;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-ink)}
.vf-code-in::placeholder{color:#b3b8cc;letter-spacing:.04em}
.vf-code-in:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,139,.12)}
.vf-code-in.is-error{border-color:#d93025}
.vf-code-row .btn{flex:none}
@media (max-width:420px){.vf-code-row{flex-direction:column}}