/* ── Layout ─────────────────────────────────────────────── */
html { font-size: 100%; }
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Header ─────────────────────────────────────────────── */
header { border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; }
header a#logo { margin: 1rem; display: block; }
header a#logo img { max-height: 6.25rem; border: 0; }
header img { max-width: 100%; }
header div#https img { margin-top: 1rem; }
header h1 {
    background: #004764; color: #FFF;
    font-family: "Gothic A1", sans-serif; font-weight: 500; font-size: 1.2rem;
    display: inline-block; padding: .35rem .75rem; margin: 3rem 0 0 0;
}
header h2 { color: #004764; font-weight: 500; font-size: 1rem; margin-top: .5rem; }

/* ── Main ───────────────────────────────────────────────── */
main { font-size: 1rem; }
main section#upload { margin: 5rem 0; }

/* ── Form ───────────────────────────────────────────────── */
main form label { color: #004764; }
main form label.required::before {
    font-family: "FontAwesome"; content: "\f069";
    padding-right: .25rem; font-size: .5rem; font-weight: 500;
    position: relative; top: -.3rem; color: #900;
}
main form span.help-block { color: #C00; font-size: .85rem; margin: .1rem 0; font-weight: 600; }
.buttonWrapper { margin-top: 1rem; }

/* ── Drop zone ───────────────────────────────────────────── */
#dropZone {
    box-sizing: border-box; width: 100%;
    border: 1px dashed #AAA; border-bottom: none;
    border-radius: .25rem .25rem 0 0;
    min-height: 160px; padding: .5rem;
    cursor: pointer; transition: border-color .2s, background .2s;
}
#dropZone.drag-over { border-color: #004764; background: #f0f7fb; }
#dropHint { text-align: center; color: #AAA; margin: 2.5rem 0; pointer-events: none; }
#dropZone input[type="file"] { display: none; }

/* ── Caption bar ─────────────────────────────────────────── */
#fileCaptionText {
    color: #AAA; cursor: default; border-color: #AAA;
    border-radius: 0 0 0 .25rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fileCaptionText.has-files { color: #555; }

/* ── File list ───────────────────────────────────────────── */
#fileList { list-style: none; padding: 0; margin: 0; }
#fileList li {
    display: flex; align-items: center;
    padding: .35rem .5rem; font-size: .9rem;
    border-bottom: 1px solid #F0F0F0;
}
#fileList li:last-child { border-bottom: none; }
#fileList li .file-name { flex: 1; }
#fileList li .file-size { color: #AAA; margin: 0 .75rem; white-space: nowrap; font-size: .8rem; }
#fileList li .remove-file {
    background: none; border: none; cursor: pointer;
    color: #AAA; font-size: 1rem; line-height: 1; padding: 0 .25rem;
}
#fileList li .remove-file:hover { color: #C00; }

/* ── Success message ─────────────────────────────────────── */
.success-wrapper { padding: 0 2rem; }
.success-title {
    color: #004764; font-family: "Gothic A1", sans-serif;
    font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.success-body { color: #555; }

/* ── Loading overlay ─────────────────────────────────────── */
#bgProcess {
    background: rgba(0, 0, 0, 0.35);
    width: 100%; height: 100%;
    position: fixed; left: 0; top: 0; z-index: 2000;
    align-items: center; justify-content: center;
    display: none;
}
#uploadCard {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 2.5rem 3rem;
    text-align: center;
    min-width: 300px; max-width: 420px; width: 90%;
}
#uploadSpinner { color: #004764; width: 3rem; height: 3rem; }
#uploadLabel { color: #004764; font-weight: 600; }
#uploadProgressWrap { height: 1.25rem; }
#uploadPercent { color: #888; }

/* ── Responsive ─────────────────────────────────────────── */
@media (min-width: 1200px) { html { font-size: 100%; } .container { max-width: 1200px; } }
@media (min-width: 992px)  and (max-width: 1200px) { html { font-size: 85%; } }
@media (min-width: 768px)  and (max-width: 992px)  { html { font-size: 80%; } }
@media (min-width: 576px)  and (max-width: 768px)  { html { font-size: 75%; } }
@media (max-width: 576px)  { html { font-size: 70%; } main h1 { margin-top: 2rem; } }