/*-----import-styles-start-----*/
@import url(../global/global.css?ver=3.01);
@import url(../layout/header.css?ver=3.01);
@import url(../layout/footer.css);
/*-----import-styles-end-----*/


/*-----💡-uploader-start-----*/
.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

.upload-section .section-title {
    font-size: 20px;
    font-weight: 600;
}

@media (min-width: 576px) {

    .upload-section .section-title {
        font-size: 16px;
    }
}

.upload-section .dropzone {
    border-radius: 16px;
}

.upload-section .dz-message {
    display: none;
}

.upload-section .uploader-card {
    position: relative;
    background-color: var(--white-color);
    border: 2px dashed var(--tertiary-color-200);
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.02), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
    border-radius: 16px;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    height: 350px;
}

@media (max-width: 400px) {
    .upload-section .uploader-card {
        height: 100%;
        aspect-ratio: 1/1;
    }
}

.upload-section .uploader-card .uploader-default {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.upload-section .uploader-card.hover {
    background: var(--primary-color-50);
}

/* وقتی در حالت خطاست، عنوان به بالا راست برود */
.upload-section .uploader-card.error .uploader-title {
    position: absolute;
    top: 16px;
    right: 16px;
}

.upload-section .uploader-title {
    color: var(--informative-color-600);
    font-size: 12px;
    font-weight: 500;
}

.upload-section .uploading-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
    height: 100px;
    background: var(--white-color);
    border: 1px solid var(--tertiary-color-50);
    border-radius: 8px;
}

.upload-section .cancel-btn {
    pointer-events: auto !important;
    z-index: 999;
    position: relative;
}

.upload-section .uploading-row .uploader-file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--tertiary-color-950);
}

.upload-section .uploading-row .uploader-subtle {
    color: var(--tertiary-color-400);
    font-size: 10px;
    margin-top: 12px;
}

.upload-section .progress-rail {
    width: 100%;
    height: 8px;
    background: var(--tertiary-color-100);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
}

.upload-section .progress-bar {
    height: 100%;
    width: 0;
    background: var(--informative-color-700);
    transition: width .2s linear;
}

.upload-section .uploader-card.error {
    border-color: var(--error-color);
}

.upload-section .error-list::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clip-path='url(%23clip0_1505_11819)'><path d='M8.00016 4.16634C8.27631 4.16634 8.50016 4.3902 8.50016 4.66634V8.66634C8.50016 8.94248 8.27631 9.16634 8.00016 9.16634C7.72402 9.16634 7.50016 8.94248 7.50016 8.66634V4.66634C7.50016 4.3902 7.72402 4.16634 8.00016 4.16634Z' fill='%23FF0034'/><path d='M8.00016 11.333C8.36835 11.333 8.66683 11.0345 8.66683 10.6663C8.66683 10.2982 8.36835 9.99967 8.00016 9.99967C7.63197 9.99967 7.3335 10.2982 7.3335 10.6663C7.3335 11.0345 7.63197 11.333 8.00016 11.333Z' fill='%23FF0034'/><path fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 7.99967C0.833496 4.04163 4.04212 0.833008 8.00016 0.833008C11.9582 0.833008 15.1668 4.04163 15.1668 7.99967C15.1668 11.9577 11.9582 15.1663 8.00016 15.1663C4.04212 15.1663 0.833496 11.9577 0.833496 7.99967ZM8.00016 1.83301C4.59441 1.83301 1.8335 4.59392 1.8335 7.99967C1.8335 11.4054 4.59441 14.1663 8.00016 14.1663C11.4059 14.1663 14.1668 11.4054 14.1668 7.99967C14.1668 4.59392 11.4059 1.83301 8.00016 1.83301Z' fill='%23FF0034'/></g><defs><clipPath id='clip0_1505_11819'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>");
    display: inline-block;
    width: 16px;
    height: 16px;
}

.upload-section .error-list {
    color: var(--error-color);
    font-size: 12px;
    font-weight: 500;
    text-align: justify;
    padding: 0;
    margin-top: 50px;
    display: flex;
    align-items: start;
    gap: 5px;
}

.upload-section .preview-card {
    position: absolute;
    background: var(--primary-color-50);
    color: var(--white-color);
    height: 345px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.02), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
    border-radius: 16px;
}

@media (max-width: 400px) {
    .upload-section .preview-card {
        height: 100%;
        aspect-ratio: 1/1;
    }
}

.upload-section .preview-card .title::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clip-path='url(%23clip0_1505_1510)'><path fill-rule='evenodd' clip-rule='evenodd' d='M10.6668 4.49967C10.2066 4.49967 9.8335 4.87277 9.8335 5.33301C9.8335 5.79325 10.2066 6.16634 10.6668 6.16634C11.1271 6.16634 11.5002 5.79325 11.5002 5.33301C11.5002 4.87277 11.1271 4.49967 10.6668 4.49967ZM8.8335 5.33301C8.8335 4.32049 9.65431 3.49967 10.6668 3.49967C11.6794 3.49967 12.5002 4.32049 12.5002 5.33301C12.5002 6.34553 11.6794 7.16634 10.6668 7.16634C9.65431 7.16634 8.8335 6.34553 8.8335 5.33301Z' fill='%2300A484'/><path fill-rule='evenodd' clip-rule='evenodd' d='M7.96191 0.833008H8.03841C9.57734 0.832999 10.7834 0.832993 11.7244 0.959506C12.6875 1.089 13.4475 1.35923 14.0441 1.95577C14.6406 2.55231 14.9108 3.31232 15.0403 4.27548C15.1668 5.21647 15.1668 6.4225 15.1668 7.96143V8.03792C15.1668 9.57685 15.1668 10.7829 15.0403 11.7239C14.9108 12.687 14.6406 13.447 14.0441 14.0436C13.4475 14.6401 12.6875 14.9103 11.7244 15.0398C10.7834 15.1664 9.57734 15.1663 8.03841 15.1663H7.96191C6.42298 15.1663 5.21696 15.1664 4.27597 15.0398C3.31281 14.9103 2.55279 14.6401 1.95625 14.0436C1.35971 13.447 1.08949 12.687 0.959994 11.7239C0.833481 10.7829 0.833488 9.57685 0.833496 8.03793V7.96142C0.833488 6.42249 0.833481 5.21647 0.959994 4.27548C1.08949 3.31232 1.35971 2.55231 1.95625 1.95577C2.55279 1.35923 3.31281 1.089 4.27597 0.959506C5.21696 0.832993 6.42298 0.832999 7.96191 0.833008ZM2.66336 13.3365C2.28359 12.9567 2.06566 12.4429 1.95108 11.5906C1.84876 10.8296 1.83547 9.85869 1.83375 8.55976L2.83047 7.68764C3.23988 7.32941 3.85693 7.34995 4.2416 7.73463L7.10142 10.5944C7.73138 11.2244 8.72303 11.3103 9.45193 10.798L9.65073 10.6583C10.2228 10.2563 10.9969 10.3028 11.5167 10.7706L13.6657 12.7047C13.6891 12.7258 13.7139 12.7442 13.7398 12.7601C13.632 12.9873 13.4993 13.1741 13.337 13.3365C12.9572 13.7162 12.4434 13.9342 11.5911 14.0488C10.7245 14.1653 9.58565 14.1663 8.00016 14.1663C6.41468 14.1663 5.27587 14.1653 4.40921 14.0488C3.55695 13.9342 3.04313 13.7162 2.66336 13.3365ZM4.40921 1.95059C3.55695 2.06517 3.04313 2.2831 2.66336 2.66287C2.28359 3.04264 2.06566 3.55646 1.95108 4.40873C1.85432 5.12839 1.83718 6.03572 1.83415 7.23065L2.17197 6.93506C2.97759 6.23015 4.19177 6.27058 4.94871 7.02752L7.80852 9.88734C8.09487 10.1737 8.54562 10.2127 8.87694 9.97988L9.07573 9.84017C10.0293 9.17004 11.3193 9.24768 12.1856 10.0273L14.0349 11.6917C14.0399 11.6586 14.0446 11.6249 14.0492 11.5906C14.1658 10.724 14.1668 9.58516 14.1668 7.99967C14.1668 6.41419 14.1658 5.27538 14.0492 4.40873C13.9347 3.55646 13.7167 3.04264 13.337 2.66287C12.9572 2.2831 12.4434 2.06517 11.5911 1.95059C10.7245 1.83407 9.58565 1.83301 8.00016 1.83301C6.41468 1.83301 5.27587 1.83407 4.40921 1.95059Z' fill='%2300A484'/></g><defs><clipPath id='clip0_1505_1510'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>");
    display: inline-block;
    width: 16px;
    height: 16px;
}

.upload-section .preview-card .title {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-section .preview-wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.upload-section .preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

/*-----💡-uploader-end-----*/

/*-----💡-tips-start-----*/
.upload-section .tips {
    padding: 16px;
    gap: 16px;
    background: var(--blue-color-100);
    border-radius: 16px;
}

.upload-section .tips .tips-list {
    color: var(--informative-color-900);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 576px) {
    .upload-section .tips .tips-list {
        font-size: 14px;
    }
}

.upload-section .tips .tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.upload-section .tips .tips-list li::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'><circle cx='6' cy='6' r='6' fill='%233795FA'/></svg>");
    display: inline-block;
    width: 12px;
    height: 12px;
}

.upload-section .actions-btn a {
    width: 100%;
}

.upload-section .actions-btn a:hover svg {
    fill: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
}

@media (min-width: 576px) {
    .upload-section .actions-btn a {
        width: fit-content;
        min-width: 175px;
    }
}

@media (max-width: 576px) {
    .upload-section .actions-btn .btn-box {
        width: 100%;
    }
}

/*-----💡-tips-end-----*/

/*-----💡-inputs-start-----*/
.upload-section .custom-color-picker {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    left: 1px !important;
}

.upload-section .color-input {
    position: absolute;
    /* inset: 0; */
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-section #colorIcon {
    color: #E0AAFF;
    transition: color 0.2s ease;
    pointer-events: none;
}

.upload-section .tag-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.upload-section .tag-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.upload-section .tag-pill {
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.upload-section #add-new-picks {
    width: 48px;
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.upload-section .form-control {
    height: 48px;
    border-radius: 8px;
}

.upload-section .form-select,
.upload-section input.form-control,
.upload-section .color-picker-wrapper,
.upload-section .input-icon-wrapper {
    max-width: 350px;
}


.upload-section .input-icon-wrapper .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.upload-section .form-control,
.upload-section .form-select {
    border-radius: 8px;
    height: 48px;
}

.upload-section textarea.form-control {
    height: 180px;
    resize: none;
}

/*-----💡-inputs-end-----*/