/* Modal Wrapper */
#wc-drive-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 99999;
    display: none; align-items: center; justify-content: center;
}
.wc-drive-hidden { display: none !important; }

/* Modal Content Box */
.wc-drive-modal-content {
    background: #fff; padding: 30px; border-radius: 8px;
    width: 90%; max-width: 500px; text-align: center; position: relative;
    direction: rtl; /* RTL Support */
}
#wc-drive-close {
    position: absolute; top: 15px; left: 20px; font-size: 24px; /* Move close button to the left */
    cursor: pointer; color: #555;
}

/* Drag & Drop Zone */
#wc-drive-dropzone {
    border: 2px dashed #ccc; padding: 40px 20px; border-radius: 8px;
    margin: 20px 0; cursor: pointer; transition: 0.3s;
}
#wc-drive-dropzone:hover { border-color: #22c55e; background: #f0fdf4; }
#wc-drive-dropzone span { color: #22c55e; font-weight: bold; text-decoration: underline; }
#wc-drive-file-input { display: none; }

/* The Progress Snake (Circular Loader) */
.wc-drive-snake-container {
    width: 80px; height: 80px; margin: 20px auto;
    border-radius: 50%; padding: 6px;
    background: #e0e0e0;
}
.wc-drive-snake {
    width: 100%; height: 100%; border-radius: 50%;
    /* Creates the green ring that fills up based on the --progress variable */
    background: conic-gradient(#22c55e 0%, #22c55e var(--progress), transparent var(--progress), transparent 100%);
    display: flex; align-items: center; justify-content: center;
}
.wc-drive-snake::before {
    content: ""; display: block; width: 85%; height: 85%;
    background: white; border-radius: 50%;
}