/*.upload-wrapper {*/
/*    max-width: 600px;*/
/*}*/


/* DROPZONE */
.dropzone {
    border: 2px dashed var(--colors-primary-color-base-200);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: 0.25s ease;
    background: var(--colors-primary-color-base-75);
}

.dropzone.dragover {
    background: #f8f9ff;
    border-color: #4f46e5;
}

/* PLACEHOLDER */
.upload-placeholder .icon {
    font-size: 32px;
    margin-bottom: 18px;
}

.upload-placeholder p {
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: var(--colors-primary-color-base-800);
    margin-bottom: 8px;
}

.upload-placeholder span {
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: var(--colors-primary-color-base-600);
    display: block;
}

/* BROWSE BUTTON */
.browse-btn {
    margin-top: 20px;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: var(--colors-primary-color-base-800);
    border: 1px solid var(--colors-primary-color-base-200);
    border-radius: 8px;
    padding: 6px 12px;
    background: var(--colors-primary-color-base-white);
    cursor: pointer;
}

/* PREVIEW */
.preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed var(--colors-primary-color-base-200);
    border-radius: 12px;
    padding: 12px;
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-info img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-bottom: 2px;
}

/* FILE INFO */
.file-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    color: var(--colors-primary-color-base-800);
}

.file-size {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--colors-primary-color-base-600);
}

/* REMOVE BUTTON */
.remove-file {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}




/*.upload-dropzone {*/
/*    border: 2px dashed var(--colors-primary-color-base-200);*/
/*    border-radius: 12px;*/
/*    padding: 20px 16px;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*    transition: 0.25s ease;*/
/*    background: var(--colors-primary-color-base-75);*/
/*}*/

/*.upload-dropzone.dragover {*/
/*    background: #f8f9ff;*/
/*    border-color: #4f46e5;*/
/*}*/

/*.upload-placeholder .icon {*/
/*    font-size: 32px;*/
/*    margin-bottom: 18px;*/
/*}*/

/*.upload-placeholder p {*/
/*    font-weight: 600;*/
/*    font-size: 14px;*/
/*    line-height: 143%;*/
/*    text-align: center;*/
/*    color: var(--colors-primary-color-base-800);*/
/*    margin-bottom: 8px;*/
/*}*/

/*.upload-placeholder span {*/
/*    font-weight: 400;*/
/*    font-size: 14px;*/
/*    line-height: 143%;*/
/*    text-align: center;*/
/*    color: var(--colors-primary-color-base-600);*/
/*    display: block;*/
/*}*/

/*.browse-btn {*/
/*    margin-top: 20px;*/
/*    font-weight: 500;*/
/*    font-size: 12px;*/
/*    line-height: 150%;*/
/*    letter-spacing: 0.02em;*/
/*    color: var(--colors-primary-color-base-800);*/
/*    border: 1px solid var(--colors-primary-color-base-200);*/
/*    border-radius: 8px;*/
/*    padding: 6px 12px;*/
/*    background: var(--colors-primary-color-base-white);*/
/*}*/

/*.upload-preview {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    border: 2px dashed var(--colors-primary-color-base-200);*/
/*    border-radius: 12px;*/
/*    padding: 12px;*/
/*}*/

/*.preview-info {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 12px;*/
/*}*/

/*.preview-info img {*/
/*    width: 36px;*/
/*    height: 36px;*/
/*    object-fit: contain;*/
/*    margin-bottom: 2px;*/
/*}*/

/*.file-name {*/
/*    font-weight: 600;*/
/*    font-size: 12px;*/
/*    line-height: 150%;*/
/*    color: var(--colors-primary-color-base-800);*/
/*}*/

/*.file-size {*/
/*    font-weight: 400;*/
/*    font-size: 12px;*/
/*    line-height: 133%;*/
/*    color: var(--colors-primary-color-base-600);*/
/*}*/

/*.remove-btn {*/
/*    border: none;*/
/*    background: none;*/
/*    font-size: 18px;*/
/*    cursor: pointer;*/
/*    color: #999;*/
/*}*/