/**
 * Frontend CSS
 *
 * @package DocsCentral\SignatureStamper
 * @since   1.0.0
 */

/* Base Styles */
.dcss-signature-shortcode {
    position: relative;
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    border: 1px solid #e0e0e0;
}

.dcss-signature-shortcode * {
    box-sizing: border-box;
}

/* Upload Section */
.dcss-upload-dropzone.dragover {
    border-color: #007cba;
    background: #f5f9ff;
}

.dcss-upload-progress {
    display: none;
}

.dcss-progress-fill {
    transition: width 0.3s ease;
}

/* Signature Pad */
.dcss-signature-pad-wrapper canvas {
    touch-action: none;
}

.dcss-signature-pad-overlay {
    pointer-events: none;
}

/* Signature Items */
.dcss-signature-wrapper {
    position: absolute;
    cursor: move;
    pointer-events: all;
}

.dcss-signature-wrapper img {
    pointer-events: none;
}

.dcss-signature-wrapper:hover {
    outline: 2px solid #007cba;
}

/* Messages */
.dcss-message-success {
    background: #4CAF50;
}

.dcss-message-error {
    background: #f44336;
}

.dcss-message-warning {
    background: #FF9800;
}

.dcss-message-info {
    background: #2196F3;
}

@keyframes dcss-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.dcss-message-content {
    animation: dcss-slide-in 0.3s ease-out;
}

/* Loading State */
.dcss-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .dcss-editor-toolbar {
        flex-wrap: wrap;
        gap: 5px;
    }
    .dcss-thumbnails-sidebar {
        display: none;
    }
    .dcss-signature-pad-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .dcss-signature-settings {
        justify-content: center;
    }
    .dcss-actions-container {
        flex-direction: column;
    }
    .dcss-action-btn {
        width: 100%;
        justify-content: center;
    }
}