.ptw-container {
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 0 15px rgba(0,0,0,0.08);
max-width: 650px;
margin: 40px auto;
text-align: center;
font-family: system-ui, sans-serif;
}
.ptw-dropzone {
border: 2px dashed #0073aa;
border-radius: 12px;
padding: 40px 20px;
background: #f9fafb;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.ptw-dropzone.dragover {
background: #e6f7ff;
border-color: #005c8a;
}
.ptw-dropzone p {
margin: 0;
color: #0073aa;
font-weight: 500;
}
.ptw-dropzone input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.ptw-file {
margin-top: 15px;
text-align: left;
}
.ptw-progress {
width: 100%;
background: #eee;
border-radius: 8px;
overflow: hidden;
margin: 8px 0;
}
.ptw-progress-bar {
height: 8px;
background: #0073aa;
width: 0%;
transition: width 0.3s;
}
.ptw-result-box {
background: #fff;
padding: 15px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
margin-bottom: 25px;
}
.ptw-compare {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 15px;
flex-wrap: wrap;
}
.ptw-compare img {
max-width: 200px;
border-radius: 8px;
border: 1px solid #ddd;
}
.ptw-stats {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #444;
}
.ptw-saving {
font-weight: bold;
color: #0073aa;
}
.ptw-download {
display: inline-block;
background: #0073aa;
color: white;
padding: 6px 12px;
border-radius: 6px;
text-decoration: none;
margin-top: 10px;
transition: background 0.2s;
}
.ptw-download:hover {
background: #005c8a;
}
.ptw-options {
margin: 15px 0 25px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
align-items: center;
}
.ptw-options label {
font-weight: 600;
color: #333;
}
.ptw-options input,
.ptw-options select {
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}