/*
 * States of the Livewire form widgets (resources/views/components/wire). Loaded only on pages
 * rendered with <x-product-layout :livewire="true">. The resting upload box is the house dropzone
 * (.product-upload-dropzone in assets/css/form-v2.css); this adds what it lacked: upload progress,
 * the check after upload, and the uploaded file.
 *
 * AIK v2.1 tokens from products/css/style.css. The bar is orange-700, not the brand orange: a
 * progress mark needs 3:1 against its track (WCAG 1.4.11), and #F58320 on grey is about 2.3:1.
 */

[x-cloak] {
    display: none !important;
}

/*
 * A focus the keyboard can see (WCAG 1.4.11, 2.4.7). The house rules give inputs a #f78930 border
 * (2.45:1 on white) with a near-invisible tint, and Select2 a half-transparent outline; orange-700 is
 * 3.75:1. Same selectors as form-v2.css and select.css, and this file loads after both, so it wins
 * on Livewire pages only.
 */
.product-buy-wizard .buyonline-input:focus-visible,
.product-buy-wizard .form-control:focus-visible,
.product-buy-wizard .form-select:focus-visible,
.wire-upload .product-upload-dropzone:focus-within,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--aik-orange-700, #C96B1A);
    box-shadow: 0 0 0 2px var(--aik-orange-700, #C96B1A);
    outline: none;
}

.wire-upload__progress {
    border: 1px dashed var(--aik-grey-200, #DEDDDD);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: center;
    min-height: 116px; /* the dropzone's height, so the page does not jump while uploading */
    padding: 1.15rem;
}

.wire-upload__progress-head {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.wire-upload__file {
    color: var(--aik-grey-900, #231F20);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wire-upload__percent {
    color: var(--aik-grey-900, #231F20);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.wire-upload__track {
    background: var(--aik-grey-100, #E9E9E9);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.wire-upload__bar {
    background: var(--aik-orange-700, #C96B1A);
    border-radius: inherit;
    height: 100%;
    transition: width 0.2s ease-out;
    width: 0;
}

.wire-upload__cancel,
.wire-upload__remove {
    align-self: flex-start;
    background: none;
    border: 0;
    color: var(--aik-orange-800, #AC5C16); /* AA text on white */
    font-weight: 500;
    min-height: 44px; /* touch target */
    padding: 0;
    text-decoration: underline;
}

.wire-upload__cancel:focus-visible,
.wire-upload__remove:focus-visible {
    outline: 2px solid var(--aik-focus, #C96B1A);
    outline-offset: 2px;
}

.wire-upload__checking {
    align-items: center;
    color: var(--aik-grey-700, #4F4C4D);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.wire-upload__done {
    align-items: center;
    color: var(--aar-success, #198754);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.wire-upload__done > span {
    color: var(--aik-grey-900, #231F20);
    min-width: 0;
    overflow-wrap: anywhere;
}

.wire-upload__done .bi {
    color: var(--aar-success, #198754);
}

.wire-upload__failed,
.wire-upload__error,
.wire-field__error {
    color: #B42318; /* 6.2:1 on white */
    font-size: 0.875rem;
    margin: 0.35rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .wire-upload__bar {
        transition: none;
    }
}