/* Responsive print area overlay using CSS percentages */
.mj-canvas-wrapper {
    position: relative;
    display: block;
    line-height: 0;
}

.mj-canvas-wrapper canvas {
    display: block;
}

.print-safe-area {
    position: absolute;
    border: 2px dashed #ff0000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    left: var(--print-left, 15%);
    top: var(--print-top, 12%);
    width: var(--print-width, 67%);
    height: var(--print-height, 13%);
    pointer-events: none;
    transform: translate(var(--print-translate-x, 0px), var(--print-translate-y, 0px))
               scale(var(--print-zoom-x, 1), var(--print-zoom-y, 1));
    transform-origin: 0 0;
}

.print-safe-area .user-text {
    display: inline-block !important;
    max-width: 95%;
    max-height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    line-height: normal !important;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Force dashed frame visibility on small/mobile screens */
@media (max-width: 767px) {
    .print-safe-area {
        display: flex !important;
        border: 2px dashed #ff0000 !important;
        z-index: 10 !important;
        opacity: 1 !important;
        pointer-events: none;
    }
}

/* iPhone Sharp Text Rendering Fix */
@media only screen and (max-width: 767px) {
    body.is-chrome-iphone .print-safe-area .user-text,
    body.is-safari-iphone .print-safe-area .user-text,
    .print-safe-area .user-text {
        transform: translateZ(0) scale(1.00001) !important;
        -webkit-font-smoothing: antialiased !important;
        text-rendering: optimizeLegibility !important;
        filter: blur(0px) !important;
        -webkit-text-stroke: 0.1px rgba(255,255,255,0.1);
    }
}

/* Chrome on iPad: adjust overlay position and size */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
    body.is-chrome-ipad .print-safe-area {
        transform: translate(var(--print-translate-x, 0px), var(--print-translate-y, 0px))
                   translate(var(--chrome-ipad-offset-x, 0px), var(--chrome-ipad-offset-y, -20px))
                   scale(var(--print-zoom-x, 1), var(--print-zoom-y, 1));
        width: calc(var(--print-width, 67%) * var(--chrome-ipad-scale-width, 0.98)) !important;
        height: calc(var(--print-height, 13%) * var(--chrome-ipad-scale-height, 0.98)) !important;
        overflow: visible !important;
    }
    
    /* Center text vertically and apply same offset as parent on Chrome iPad only */
    body.is-chrome-ipad .print-safe-area .user-text {
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(var(--chrome-ipad-offset-y, -20px));
        overflow: visible !important;
        line-height: 1.1 !important;
    }
}