/* signature_pad/static/signature_pad/css/signature_pad_widget.css */
.signature-pad-container {
    display: block;
    width: 100%;  /* Make container full width of parent */
    max-width: 100%; /* Ensure it doesn't overflow */
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

.signature-pad-wrapper {
    position: relative;
    width: 100%;
    /* Set an aspect ratio using padding trick (2:1 aspect ratio here) */
    padding-bottom: 50%;
    background-color: #f8f9fa;
}

.signature-pad-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none; /* Prevents scrolling while signing on mobile */
}

.signature-pad-controls {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

.signature-pad-clear-button {
    background: none;
    border: none;
    padding: 0;
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.signature-pad-clear-button:hover {
    color: #0a58ca;
    background: none;
}

.signature-pad-clear-button:focus {
    outline: none;
}

/* Media query for mobile devices */
@media (max-width: 576px) {
    .signature-pad-container {
        padding: 0.5rem;
    }

    /* Adjust aspect ratio for smaller screens if needed */
    .signature-pad-wrapper {
        padding-bottom: 60%; /* Slightly taller on mobile */
    }
}