/* Image Frame Border Maker Tool Styles */

/* Fabric.js canvas wrapper */
.canvas-container {
    margin: 0 auto !important;
    display: inline-block !important;
}

/* Responsive canvas - scale proportionally */
#previewContainer .canvas-container canvas.lower-canvas,
#previewContainer .canvas-container canvas.upper-canvas {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Canvas wrapper for better display */
.canvas-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Preview container styling */
#previewContainer {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
}

/* Color picker button group */
.btn-group .btn-sm {
    padding: 0.25rem 0.5rem;
}

/* Form check for frame type options */
.form-check.flex-fill {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
    transition: all 0.2s;
}

.form-check.flex-fill:hover {
    background: #e9ecef;
    border-color: var(--bs-primary-text-emphasis, #052c65);
}

.form-check-input:checked + .form-check-label {
    font-weight: 600;
    color: var(--bs-primary-text-emphasis, #052c65);
}