#fu-container {
width: 100%;
box-sizing: border-box;
} #fu-upload-panel,
#fu-preview-panel {
width: 100%;
box-sizing: border-box;
}
#fu-upload-panel {
display: block;
}
#fu-upload-panel[hidden],
#fu-preview-panel[hidden],
#fu-order-panel[hidden],
#fu-processing[hidden],
#fu-preview-image[hidden] {
display: none !important;
} #fu-drop-zone {
min-height: 420px;
border: 2px dashed #ccc;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: border-color .2s, background .2s;
box-sizing: border-box;
}
#fu-drop-zone:hover,
#fu-drop-zone.fu-dragover {
border-color: #d62f82;
background: #fff7fb;
}
#fu-drop-message {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
font-size: 18px;
}
#fu-select-button,
#fu-add-to-cart,
#fu-cancel-upload {
border: 0;
border-radius: 5px;
cursor: pointer;
font-size: 22px;
padding: 13px 32px;
}
#fu-select-button,
#fu-add-to-cart {
background: #d62f82;
color: #fff;
}
#fu-add-to-cart {
width: 100%;
margin-top: 15px;
font-weight: 600;
}
#fu-cancel-upload {
width: 100%;
margin-top: 18px;
background: #666;
color: #fff;
} #fu-progress {
height: 10px;
margin-top: 20px;
background: #eee;
border-radius: 20px;
overflow: hidden;
}
#fu-progress-bar {
width: 0;
height: 100%;
background: #d62f82;
transition: width .15s;
}
#fu-status {
margin-top: 10px;
min-height: 22px;
} #fu-preview-panel {
width: 100%;
}
#fu-preview-wrapper {
min-height: 410px;
width: 100%;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
#fu-preview-image {
display: block;
max-width: 100%;
max-height: 600px;
width: auto;
height: auto;
object-fit: contain;
} #fu-processing {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 35px;
}
.fu-spinner {
width: 18px;
height: 18px;
border: 3px solid #ddd;
border-top-color: #d62f82;
border-radius: 50%;
animation: fu-spin .8s linear infinite;
}
@keyframes fu-spin {
to {
transform: rotate(360deg);
}
} #fu-order-panel {
margin-top: 18px;
}
.fu-info-row {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.fu-info-row strong {
text-align: right;
overflow-wrap: anywhere;
}
#fu-quantity {
display: block;
width: 90px;
padding: 8px;
margin-top: 8px;
font-size: 18px;
box-sizing: border-box;
}
#fu-order-price {
text-align: center;
font-size: 34px;
font-weight: 700;
color: #d62f82;
margin-top: 18px;
}
@media (max-width: 800px) {
#fu-drop-zone {
min-height: 220px;
}
#fu-preview-wrapper {
min-height: 300px;
}
#fu-preview-image {
max-height: 450px;
}
} #fu-order-panel {
margin-top: 6px; width: 358px;
padding-bottom: 16px;
}
.fu-order-heading {
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
margin-left: 80px;
color: #222;
}
.fu-order-quantity {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 10px;
}
.fu-order-quantity label {
font-size: 16px;
font-weight: 400;
color: #333;
}
#fu-quantity {
width: 70px;
height: 42px;
padding: 5px 8px;
font-size: 16px;
border: 1px solid #bbb;
border-radius: 3px;
box-sizing: border-box;
}
#fu-order-price {
text-align: center;
font-size: 30px;
line-height: 1.1;
font-weight: 700;
color: #d92b7d;
margin: 8px 0 16px;
}
#fu-add-to-cart {
display: block;
width: 100%;
height: 68px;
border: none;
border-radius: 8px;
background: #d92b7d;
color: #fff;
font-size: 26px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
#fu-add-to-cart:hover {
background: #c2226d;
}
#fu-generic-preview-message {
display: block !important;
width: 100% !important;
flex: 0 0 auto !important;
box-sizing: border-box;
text-align: center;
font-size: 17px;
line-height: 1.4;
font-weight: 700;
margin: 0 0 18px 0;
color: #333;
} #fu-pdf-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
#fu-pdf-navigation button {
border: 0;
border-radius: 4px;
padding: 8px 16px;
background: #d92b7d;
color: #fff;
font-size: 14px;
cursor: pointer;
}
#fu-pdf-navigation button:hover {
background: #c2226d;
}
#fu-pdf-navigation button:disabled {
opacity: 0.45;
cursor: default;
}
#fu-pdf-page {
font-size: 15px;
font-weight: 600;
min-width: 85px;
text-align: center;
}