/* File: wct-style.css */
/* Sử dụng CSS variables để dễ tùy biến sau này nếu cần */
:root {
    --wct-red: #ff0000;
    --wct-red-hover: #cc0000;
    --wct-border: #ddd;
}

.wct-clean-ui { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 20px; 
    border: 1px solid var(--wct-border); 
    border-radius: 8px; 
    background: #fff; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wct-dropzone { 
    border: 2px dashed #ccc; 
    padding: 40px; 
    text-align: center; 
    cursor: pointer; 
    margin-bottom: 20px; 
    transition: border-color 0.3s ease;
}

.wct-drop-label {
    display: block;
    width: 100%;
    cursor: pointer;
}

.wct-dropzone:hover, .wct-dropzone-active { 
    border-color: #aaa; 
}

.wct-red-btn { 
    background: var(--wct-red); 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-size: 16px; 
    border-radius: 4px; 
    transition: background 0.3s ease;
    width: 100%;
}

.wct-red-btn:hover { 
    background: var(--wct-red-hover); 
}

#wct-progress { 
    margin: 20px 0; 
    text-align: center; 
    font-style: italic; 
    color: #666;
}

#wct-results { 
    margin-top: 20px; 
}

.wct-result-item { 
    margin-bottom: 20px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
    text-align: center;
}

.wct-result-item img { 
    max-width: 200px; 
    height: auto; 
    border-radius: 4px;
    margin: 10px 0;
}

.wct-download-btn { 
    background: var(--wct-red); 
    color: #fff; 
    border: none; 
    padding: 8px 16px; 
    cursor: pointer; 
    border-radius: 4px; 
    margin-top: 10px; 
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease;
}

.wct-download-btn:hover { 
    background: var(--wct-red-hover); 
}

#wct-previews, .wct-previews {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px;
}

.wct-preview-item {
    flex: 0 0 25%;
    border: 1px solid var(--wct-border);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f9f9f9;
    position: relative;
}

.wct-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wct-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
    font-size: 14px;
}

.wct-remove-btn:hover {
    background: rgba(0,0,0,0.75);
}