/* jdm-upload.css — Upload-Widget + Cart-Badge Styling */

/* Warenkorb / Checkout Badge */
.jdm-cart-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: #f0fff4;
    border: 1px solid #b7ebc8;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #2d6a4f;
}

.jdm-cart-badge-name {
    font-weight: 500;
    word-break: break-all;
}

.jdm-cart-badge-size {
    color: #52796f;
    white-space: nowrap;
}

.jdm-upload-widget {
    margin-bottom: 1rem;
}

.jdm-upload-label {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-color, #333);
}

.jdm-upload-dropzone {
    border: 2px dashed var(--primary, #e63946);
    border-radius: 6px;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    background-color: #fafafa;
    user-select: none;
    position: relative;
}

.jdm-upload-dropzone:hover,
.jdm-upload-dropzone:focus {
    background-color: #f0f0f0;
    outline: none;
}

.jdm-upload-dropzone.jdm-upload-dragover {
    background-color: #fff0f1;
    border-color: var(--primary, #e63946);
}

.jdm-upload-dropzone.jdm-upload-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23e63946' stroke-width='4' stroke-dasharray='31.4 31.4' transform='rotate(-90 25 25)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E")
        center center no-repeat;
    border-radius: 4px;
}

.jdm-upload-input {
    display: none;
}

.jdm-upload-hint {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.2rem;
}

.jdm-upload-types {
    display: block;
    font-size: 0.8rem;
    color: #999;
}

.jdm-upload-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #f0fff4;
    border: 1px solid #b7ebc8;
    border-radius: 4px;
    font-size: 0.9rem;
}

.jdm-upload-filename {
    font-weight: 500;
    word-break: break-all;
    flex: 1;
}

.jdm-upload-filesize {
    color: #666;
    white-space: nowrap;
}

.jdm-upload-remove {
    padding: 0 0.25rem;
    color: #c00;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
}

.jdm-upload-remove:hover {
    text-decoration: underline;
    color: #900;
}

.jdm-upload-error {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff0f0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #c00;
    font-size: 0.88rem;
}

.jdm-upload-required-hint {
    font-weight: 400;
    color: #c00;
    font-size: 0.85em;
}

.jdm-upload-widget[data-required] .jdm-upload-dropzone {
    border-color: #e63946;
    background-color: #fff8f8;
}