.button-section .col-4 {
    display: flex;
}

.button-section .btn {
    display: flex;
    align-items: center;    /* Vertically center text */
    justify-content: center; /* Horizontally center text */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 4px;
    background-color: #CFB9A5;
    outline: none;
    border: none;
}

/* Base Ruler Style */
.ruler {
    position: absolute;
    background-color: #fcfaf8;
    border: 1px solid #999;
}

/* Horizontal Ruler (Bottom) */
.ruler-h {
    top: 100%; /* Position directly below the image */
    left: 0;
    width: 100%; /* Matches image width */
    height: 30px;
    /* 1mm = 100% / 32.0 */
    background-image:
        repeating-linear-gradient(90deg, #333 0, #333 1px, transparent 1px, transparent calc(100% / 32.0)),
        repeating-linear-gradient(90deg, #000 0, #000 2px, transparent 2px, transparent calc(100% / 6.40)); /* 5mm marks */
    background-size: 100% 10px, 100% 20px;
    background-repeat: no-repeat;
    background-position: top left;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Vertical Ruler (Left) */
.ruler-v {
    right: 100%; /* Position to the left of the image */
    top: 0;
    height: 100%; /* Matches image height */
    width: 30px;
    /* 1mm = 100% / 32.0 */
    background-image:
        repeating-linear-gradient(0deg, #333 0, #333 1px, transparent 1px, transparent calc(100% / 32.0)),
        repeating-linear-gradient(0deg, #000 0, #000 2px, transparent 2px, transparent calc(100% / 6.40)); /* 5mm marks */
    background-size: 10px 100%, 20px 100%;
    background-repeat: no-repeat;
    background-position: top right;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* This ensures the column only expands to the width of its content */
.content-column {
    display: inline-block;
    width: fit-content;
    vertical-align: top;
}

/* Adjust the image wrapper to not force 100% width of the parent col-md-6 */
.img-wrapper {
    width: fit-content;
    margin: 0; /* Let .content-column handle alignment */
}

.ruler-box {
    position: relative;
    display: block; /* Changed from inline-block to take up the space */
    margin-left: 30px;
    margin-bottom: 30px;
    --mm: calc(100% / 32.0);
}

/* Ensure the card matches the width of the image above it */
.content-column .card {
    /* The card will now follow the width of the img-wrapper
       but we need to account for the 30px offset of the ruler */
    margin-left: 30px;
    width: auto;
}

.img-wrapper img {
    display: block;
    /* We set a fixed max-width or let it be 512px naturally */
    width: 640px;
    max-width: 100%; /* Safety for smaller screens */
    height: auto;
    aspect-ratio: 1 / 1;
    border-top-right-radius: 10px;
}

/* The overlay now covers the whole image area */
.circle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
    z-index: 10;
    /* These variables will be updated by JavaScript */
    --mouse-x: 0px;
    --mouse-y: 0px;
}

/* Common style for circles */
.circle-overlay div {
    position: absolute;
    /* Center the circle on the mouse coordinates */
    left: var(--mouse-x);
    top: var(--mouse-y);
    transform: translate(-50%, -50%);

    border: 1px solid rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Precise sizes using the scale variable */
.c-1mm  { width: var(--mm); height: var(--mm); }
.c-2mm  { width: calc(var(--mm) * 2); height: calc(var(--mm) * 2); }
.c-3mm  { width: calc(var(--mm) * 3); height: calc(var(--mm) * 3); }
.c-4mm  { width: calc(var(--mm) * 4); height: calc(var(--mm) * 4); }
.c-5mm  { width: calc(var(--mm) * 5); height: calc(var(--mm) * 5); }
.c-6mm  { width: calc(var(--mm) * 6); height: calc(var(--mm) * 6); }
.c-7mm  { width: calc(var(--mm) * 7); height: calc(var(--mm) * 7); }
.c-8mm  { width: calc(var(--mm) * 8); height: calc(var(--mm) * 8); }
.c-9mm  { width: calc(var(--mm) * 9); height: calc(var(--mm) * 9); }
.c-10mm { width: calc(var(--mm) * 10); height: calc(var(--mm) * 10); }