/* -----------------------------------------------------------------------------
 * File upload field
 * -------------------------------------------------------------------------- */
.hf-file-uploader-wrapper {
    --hf-up-accent: var(--hf-field-border-color-focus, #2271b1);
    --hf-up-text: var(--hf-field-color-normal, #1e2327);
    --hf-up-surface: #fff;
    --hf-up-sunken: #f7f8f9;
    --hf-up-border: #e2e5ea;
    --hf-up-muted: #646970;
    --hf-up-success: #2e9e5b;
    --hf-up-danger: #d3383c;
    --hf-up-radius: 8px;

    --hf-up-soft: rgba(34, 113, 177, .08);
    --hf-up-soft: color-mix(in srgb, var(--hf-up-accent) 10%, transparent);

    --hf-up-danger-soft: rgba(211, 56, 60, .08);
    --hf-up-danger-soft: color-mix(in srgb, var(--hf-up-danger) 10%, transparent);
}

.hf-file-uploader .qq-uploader {
    position: relative;
    width: 100%;
}

/* ---------- Upload button ---------- */

.hf-file-uploader .qq-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background: #EEE;
    color: #333;
    border-radius: 2px;
    font-size: 14px;
}

.hf-form-custom-style .hf-file-uploader .qq-upload-button {
    font-family: var(--hf-upload-typo-font-family);
    font-size: var(--hf-upload-typo-font-size, 1em);
    font-weight: var(--hf-upload-typo-font-weight, inherit);
    font-style: var(--hf-upload-typo-font-style, inherit);
    letter-spacing: var(--hf-upload-typo-letter-spacing, inherit);
    text-transform: var(--hf-upload-typo-text-transform, inherit);
    text-decoration: var(--hf-upload-typo-text-decoration, inherit);
    line-height: var(--hf-upload-typo-line-height, 1.2);
    color: var(--hf-upload-color-normal, #666);
    border-top: var(--hf-upload-border-top, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-normal, #CCC);
    border-right: var(--hf-upload-border-right, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-normal, #CCC);
    border-bottom: var(--hf-upload-border-bottom, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-normal, #CCC);
    border-left: var(--hf-upload-border-left, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-normal, #CCC);
    border-radius: var(--hf-upload-border-radius-top, 3px) var(--hf-upload-border-radius-right, 3px) var(--hf-upload-border-radius-bottom, 3px) var(--hf-upload-border-radius-left, 3px);
    padding: var(--hf-upload-padding-top, 10px) var(--hf-upload-padding-right, 20px) var(--hf-upload-padding-bottom, 10px) var(--hf-upload-padding-left, 20px);
    color: var(--hf-upload-color-normal, #666);
    background-color: var(--hf-upload-bg-color-normal, #EEE);
    box-shadow: var(--hf-upload-shadow-normal-x, 0) var(--hf-upload-shadow-normal-y, 0) var(--hf-upload-shadow-normal-blur, 0) var(--hf-upload-shadow-normal-spread, 0) var(--hf-upload-shadow-normal-color, transparent);
}

.hf-form-custom-style .hf-file-uploader .qq-upload-button-hover,
.hf-form-custom-style .hf-file-uploader .qq-upload-button:hover {
    border-top: var(--hf-upload-border-top, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-hover, var(--hf-upload-border-color-normal, #CCC));
    border-right: var(--hf-upload-border-right, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-hover, var(--hf-upload-border-color-normal, #CCC));
    border-bottom: var(--hf-upload-border-bottom, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-hover, var(--hf-upload-border-color-normal, #CCC));
    border-left: var(--hf-upload-border-left, 1px) var(--hf-upload-border, solid) var(--hf-upload-border-color-hover, var(--hf-upload-border-color-normal, #CCC));
    color: var(--hf-upload-color-hover, var(--hf-upload-color-normal, inherit));
    background-color: var(--hf-upload-bg-color-hover, var(--hf-upload-bg-color-normal, #EEE));
    box-shadow: var(--hf-upload-shadow-hover-x, var(--hf-upload-shadow-normal-x, 0)) var(--hf-upload-shadow-hover-y, var(--hf-upload-shadow-normal-y, 0)) var(--hf-upload-shadow-hover-blur, var(--hf-upload-shadow-normal-blur, 0)) var(--hf-upload-shadow-hover-spread, var(--hf-upload-shadow-normal-spread, 0)) var(--hf-upload-shadow-hover-color, var(--hf-upload-shadow-normal-color, transparent));
}

.hf-file-uploader .qq-upload-button input {
    height: 100% !important;
    width: 100% !important;
    font-size: 0 !important;
}

/* ---------- Dropzone ----------
   The card wraps the real .qq-upload-button; the drop area overlays the card. */

.hf-file-uploader .hf-upload-dropzone {
    align-items: center;
    background: var(--hf-up-sunken);
    border: 2px dashed var(--hf-up-border);
    border-radius: calc(var(--hf-up-radius) + 4px);
    color: var(--hf-up-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 20px;
    position: relative;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}

.hf-file-uploader .hf-upload-dropzone:hover {
    border-color: var(--hf-up-accent);
}

.hf-file-uploader .hf-upload-dropzone-icon {
    color: var(--hf-up-accent);
    display: block;
    margin-bottom: 2px;
}

.hf-file-uploader .hf-upload-dropzone-title {
    color: var(--hf-up-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.hf-file-uploader .hf-upload-dropzone-or {
    font-size: 12px;
    line-height: 1;
    opacity: .75;
}

.hf-file-uploader .hf-upload-dropzone-hint {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
    opacity: .85;
}

/* The library sets an inline display on this, so it is centered with absolute
   positioning rather than flex. */
.hf-file-uploader .qq-upload-drop-area {
    background: var(--hf-up-soft);
    border-radius: calc(var(--hf-up-radius) + 2px);
    bottom: 0;
    color: var(--hf-up-accent);
    font-size: 14px;
    font-weight: 600;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.hf-file-uploader .qq-upload-drop-area span {
    left: 50%;
    padding: 0 16px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.hf-file-uploader .qq-upload-drop-area-active {
    background: var(--hf-up-soft);
    box-shadow: inset 0 0 0 2px var(--hf-up-accent);
}

/* ---------- Errors ---------- */

.hf-file-uploader .hf-upload-error {
    display: none;
}

.hf-file-uploader .hf-upload-error-visible {
    background: var(--hf-up-danger-soft, rgba(211, 56, 60, .08));
    border-left: 3px solid var(--hf-up-danger);
    border-radius: var(--hf-up-radius);
    color: var(--hf-up-danger);
    display: block;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
    padding: 9px 12px;
}

/* ---------- File list ---------- */

.hf-file-uploader .qq-upload-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.hf-file-uploader .qq-upload-list:empty {
    margin: 0;
}

.hf-file-uploader .hf-file-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* An uploading file is a neutral row; its state is carried by the left edge. */
.hf-file-uploader .qq-upload-list li {
    background-color: var(--hf-up-surface);
    border: 1px solid var(--hf-up-border);
    border-left: 3px solid var(--hf-up-border);
    border-radius: var(--hf-up-radius);
    color: var(--hf-up-text);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 8px;
    line-height: 1.4;
    margin: 0 0 8px;
    padding: 10px 12px;
    transition: border-color .15s ease;
}

.hf-file-uploader .qq-upload-list li:last-child {
    margin-bottom: 0;
}

/* ---------- Progress ----------
   The width is set by the library's _onProgress. */

.hf-file-uploader .hf-progress-track {
    background: var(--hf-up-border);
    border-radius: 999px;
    display: block;
    height: 4px;
    overflow: hidden;
    width: 100%;
}

.hf-file-uploader .qq-progress-bar {
    background: var(--hf-up-accent);
    border-radius: 999px;
    display: block;
    height: 100%;
    transition: width .2s ease;
    width: 0;
}

/* Hide the bar once an upload settles. */
.hf-file-uploader .qq-upload-success .hf-progress-track,
.hf-file-uploader .qq-upload-fail .hf-progress-track {
    display: none;
}

.hf-file-uploader .qq-upload-file {
    overflow-wrap: anywhere;
}

.hf-file-uploader .qq-upload-spinner {
    background: url("loading.gif");
    display: inline-block;
    height: 15px;
    vertical-align: text-bottom;
    width: 15px;
}

.hf-file-uploader .qq-upload-size,
.hf-file-uploader .qq-upload-cancel {
    font-size: 12px;
    font-weight: normal;
}

.hf-file-uploader .qq-upload-size {
    color: var(--hf-up-muted);
    margin-right: auto;
}

.hf-file-uploader .qq-upload-size:before {
    content: " - ";
}

.hf-file-uploader .qq-upload-cancel {
    border-radius: 4px;
    color: var(--hf-up-muted);
    padding: 2px 6px;
    text-decoration: none;
}

.hf-file-uploader .qq-upload-cancel:hover,
.hf-file-uploader .qq-upload-cancel:focus-visible {
    background: var(--hf-up-soft);
    color: var(--hf-up-accent);
}

.hf-file-uploader .qq-upload-failed-text {
    display: none;
}

.hf-file-uploader .qq-upload-fail .qq-upload-failed-text {
    color: var(--hf-up-danger);
    display: inline;
    font-size: 12px;
    font-weight: 600;
}

/* Outcome is shown by the edge stripe and a glyph; the library's failure text
   stays, so state is never signalled by colour alone. */
.hf-file-uploader .qq-upload-list li.qq-upload-success {
    border-left-color: var(--hf-up-success);
}

.hf-file-uploader .qq-upload-list li.qq-upload-fail {
    border-left-color: var(--hf-up-danger);
}

/* On .hf-file-row rather than the li (a column), so the glyph ends the file line. */
.hf-file-uploader .qq-upload-success .hf-file-row:after,
.hf-file-uploader .qq-upload-fail .hf-file-row:after {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    order: 99;
}

.hf-file-uploader .qq-upload-success .hf-file-row:after {
    color: var(--hf-up-success);
    content: "\2713";
}

.hf-file-uploader .qq-upload-fail .hf-file-row:after {
    color: var(--hf-up-danger);
    content: "\2715";
}

/* ---------- Previews ---------- */

.hf-file-preview:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.hf-prev-holder {
    border: 1px solid var(--hf-up-border);
    border-radius: var(--hf-up-radius);
    margin-bottom: 0;
    max-width: 220px;
    overflow: hidden;
    padding: 10px;
}

.hf-prev-holder img {
    border-radius: calc(var(--hf-up-radius) - 4px);
    display: block;
    height: auto;
    max-width: 200px !important;
}

.hf-prev-holder .hf-prev-name {
    color: var(--hf-up-muted);
    display: block;
    font-size: 12px;
    line-height: 1.4;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

/* Muted until hovered so it is not the brightest thing in the form. */
.hf-preview-remove {
    background: transparent;
    border: 1px solid var(--hf-up-border);
    border-radius: 4px;
    color: var(--hf-up-muted);
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hf-preview-remove:hover,
.hf-preview-remove:focus-visible {
    background: var(--hf-up-danger);
    border-color: var(--hf-up-danger);
    color: #fff;
}

/* Keeps its natural width if placed directly on the list item, which stretches
   its children. */
.hf-file-uploader .qq-upload-list li > .hf-preview-remove {
    align-self: flex-start;
}

@media (prefers-reduced-motion: reduce) {

    .hf-file-uploader .qq-upload-drop-area,
    .hf-file-uploader .qq-upload-list li,
    .hf-file-uploader .qq-upload-cancel,
    .hf-preview-remove {
        transition-duration: .001ms;
    }
}