/* -----------------------------------------------------------------------------
 * File upload field
 *
 * Unlike the date and time pickers, everything here renders inside
 * #hf-container-{id}, so the per form --hf-* properties are inherited normally
 * and no bridging is needed. The locals below read from the form's own field
 * tokens where there is a sensible source and fall back otherwise.
 * -------------------------------------------------------------------------- */
.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 ----------
   Already fully tokenised through the form styler; left as it was. */

.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 is a wrapper around the real .qq-upload-button, not a replacement
   for it, so a site's existing --hf-upload-* button styling still lands on a
   button. The drop area is an overlay across the card rather than a second box
   below it. */

.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 toggles this with an inline display, so the overlay is centred
   with absolute positioning rather than flex, which that inline style would
   override. */
.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 ----------
   Rejections used to arrive as a browser alert(), which had to be dismissed
   before the visitor could try again and said nothing once gone. */

.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%;
}

/* Was a flat #FFF0BD mustard. A file that is still uploading is not a warning,
   so it now reads as a neutral row and the 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 library has always driven this bar's width from _onProgress; the old
   sheet simply hid it, so a large upload showed a spinner and nothing else. */

.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;
}

/* Once an upload settles the bar has nothing left to say. */
.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 carried by the edge stripe and a glyph rather than flooding the
   row, so a long file name stays readable and the row stops competing with the
   rest of the form. The library's own failure text is still shown, so the
   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, which is a column now, so the glyph sits
   at the end of the file line instead of dropping onto one of its own. */
.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;
}

/* Was solid #FF0000 going black on hover. Destructive, but it should not be the
   brightest thing in the form until the pointer is actually on it. */
.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 it lands 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;
    }
}