/* ── 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 .row { align-items: center; }
header a#logo { display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 12px); text-decoration: none; background: #0d2040; padding: clamp(8px, 1.1vw, 12px) clamp(14px, 1.7vw, 20px); margin: 0; max-width: 100%; overflow: hidden; }
header a#logo .logo-icon { height: clamp(40px, 6vw, 72px); width: auto; border: 0; flex-shrink: 0; }
header a#logo .logo-brand { display: flex; flex-direction: column; gap: clamp(2px, 0.4vw, 4px); align-self: center; }
header a#logo .logo-text { font-family: "Bitter", serif; font-weight: 400; font-size: clamp(16px, 2.3vw, 28px); line-height: 1; color: #fff; letter-spacing: 0.8px; white-space: nowrap; }
header a#logo .logo-text span { color: rgb(229,214,143); font-family: "Nunito Sans", sans-serif; font-weight: 400; }
header a#logo .logo-sub { font-size: clamp(8px, 1vw, 12px); line-height: 1; color: #fff; letter-spacing: 0.5px; white-space: nowrap; text-align: justify; text-align-last: justify; }
header img { max-width: 100%; }
header div#https { display: flex; align-items: center; justify-content: center; }
header div#https img { height: clamp(55px, 7vw, 90px); width: auto; margin: 0; }
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; }

/* ── Maintenance ─────────────────────────────────────────── */
.maintenance-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.maintenance-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.maintenance-title { color: #004764; font-family: "Gothic A1", sans-serif; font-weight: 500; font-size: 1.3rem; margin-bottom: 1rem; }
.maintenance-body { color: #555; font-size: 1rem; line-height: 1.7; margin-bottom: 0.75rem; }

/* ── 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; }

/* ── Read-only identity fields (deposit-link.html) ──────── */
.readonly-field {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

/* ── 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; } }

/* ── Logo responsive ─────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
  header a#logo { padding: 10px 15px; gap: 9px; }
  header a#logo .logo-icon { height: 52px; }
  header a#logo .logo-text { font-size: 19px; }
  header a#logo .logo-sub { font-size: 8px; }
}
@media (max-width: 991px) {
  header { padding: 12px 0; }
  header a#logo { display: flex; width: fit-content; margin: 0 auto; }
}