.margin-padding-tool-app {
    max-width: 1200px;
    margin: auto;
}

.form-range.form-range-sm {
    height: 1rem;
    padding: 0;
    font-size: 0.8rem;
    cursor: pointer;
}

.form-range.form-range-sm::-webkit-slider-thumb {
    height: 1rem;
    width: 1rem;
}

.form-range.form-range-sm::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
}

/* --- New Styles for Preview Area --- */

/* Checkerboard pattern to represent the transparent margin area */
#preview-area {
    /* Subtle checkerboard pattern */
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), 
                      linear-gradient(-45deg, #ccc 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #ccc 75%),
                      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px; /* Size of the squares */
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px; /* Offset for seamless pattern */
    
    /* Ensure the canvas sits on top */
    position: relative;
    overflow: auto; /* Allow scrolling if the image is too large */
    min-height: 350px; 
}

/* Style for the canvas inside the preview */
#preview-area canvas {
    max-width: none; /* Crucial to prevent canvas from scaling down */
    display: block;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow for definition */
}

/* --- Padding Slider Customization (NEW) --- */
/* Target all padding sliders specifically to color them blue (Bootstrap primary) */
#padding-top,
#padding-right,
#padding-bottom,
#padding-left {
    /* Sets the track to a neutral gray if default isn't suitable */
    --bs-form-range-track-bg: var(--bs-gray-400); 
}

/* WebKit (Chrome, Safari, Edge) thumb styling */
#padding-top::-webkit-slider-thumb,
#padding-right::-webkit-slider-thumb,
#padding-bottom::-webkit-slider-thumb,
#padding-left::-webkit-slider-thumb {
    background-color: var(--bs-primary); 
}

/* Mozilla (Firefox) thumb styling */
#padding-top::-moz-range-thumb,
#padding-right::-moz-range-thumb,
#padding-bottom::-moz-range-thumb,
#padding-left::-moz-range-thumb {
    background-color: var(--bs-primary); 
}