.pop1 > .upload-your-design-form {
transition: transform 0.35s ease, opacity 0.35s ease;
width: 100%;
}

.pop1 .upload-your-design-form {
position: absolute;
top: 45px;
left: 0pt;
transform: translateX(100%);
opacity: 0;
padding: 0;
margin: 0;
}

.pop1 .upload-your-design-form.active {
transform: translateX(0);
opacity: 1;
}

/* form layout */
.pop1 .upload-your-design-form form {
display: flex;
flex-direction: column;
padding: 20pt;
background: #eee;
gap: 10pt;
}

.pop1 .upload-your-design-form textarea {
resize: vertical;
padding: 10px;
width: 100%;
font-size: larger;
font-family: monospace;
background: white;
color: black;
margin: 0;
}

.pop1 .upload-your-design-form label {
    font-size: larger;
}

.pop1 .upload-your-design-form .actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
justify-content: center;
}

.pop1 .upload-your-design-form .actions button {
    width: 100%;
}

.pop1 .upload-your-design-form .graybtn {
    background-color: #333 !important;
}

.pop1 .upload-your-design-form .greenbtn {
    background-color: green !important;
}

.pop1 .upload-your-design-form .sides {
    display: flex;
    flex-direction: row;
    gap: 10pt;
    justify-content: center;
}

.pop1 .upload-your-design-form .sides .side {
}

.pop1 .upload-your-design-form .info {
    display: flex;
    justify-content: center;
}


@media screen and (max-width: 700px){
    .pop1 .upload-your-design-form .sides {
        flex-direction: column;   
    }
    .pop1-side-uploader__file-info {
        max-width: unset !important;
    }
}


/* side component: */

.pop1-side-uploader {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    box-sizing: border-box;
}

.pop1-side-uploader *,
.pop1-side-uploader *::before,
.pop1-side-uploader *::after {
    box-sizing: border-box;
}

/* Upload Area */
.pop1-side-uploader__upload-area {
    width: 100%;
    max-width: 400px;
}

.pop1-side-uploader__dropzone {
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f7fafc;
    margin-bottom: 16px;
}

.pop1-side-uploader__dropzone:hover {
    border-color: #4299e1;
    background-color: #ebf8ff;
}

.pop1-side-uploader__dropzone--dragover {
    border-color: #4299e1;
    background-color: #bee3f8;
}

.pop1-side-uploader__dropzone-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: #718096;
}

.pop1-side-uploader__dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pop1-side-uploader__dropzone-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.pop1-side-uploader__dropzone-subtitle {
    font-size: 12px;
    color: #718096;
    margin-bottom: 8px;
}

.pop1-side-uploader__dropzone-formats {
    font-size: 12px;
    color: #a0aec0;
    font-style: italic;
}

.pop1-side-uploader__file-input {
    display: none;
}

/* Progress Bar */
.pop1-side-uploader__progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.pop1-side-uploader__progress-bar {
    flex-grow: 1;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.pop1-side-uploader__progress-fill {
    height: 100%;
    background-color: #4299e1;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.pop1-side-uploader__progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    min-width: 40px;
}

/* Error Message */
.pop1-side-uploader__error {
    margin-top: 12px;
    padding: 12px;
    background-color: #fed7d7;
    border: 1px solid #fc8181;
    border-radius: 6px;
    color: #c53030;
    font-size: 14px;
    text-align: center;
}

/* File Info */
.pop1-side-uploader__file-info {
    width: 100%;
    max-width: 400px;
    min-width: 250px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f7fafc;
}

.pop1-side-uploader__file-info .side-actions {
    display: flex;
    align-items: flex-start;
}

.pop1-side-uploader__file-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: center;
}

.pop1-side-uploader__file-header img {
    height: 150px !important;
    width: auto !important;
}

.pop1-side-uploader__file-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.pop1-side-uploader__file-name {
    font-size: 12px;
    color: #2d3748;
    font-weight: 500;
    word-break: break-all;
    flex-grow: 1;
    width: 100px;
    padding-right: 10pt;
}

.pop1-side-uploader__delete-btn {
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 15px;
    line-height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    font-family: mono;
}

.pop1-side-uploader__delete-btn:hover {
    background-color: #f56565;
}

.pop1-side-uploader__delete-btn:active {
    background-color: #e53e3e;
}