.elementor-31539 .elementor-element.elementor-element-a1fb478{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-31539 .elementor-element.elementor-element-2cd1d1f > .elementor-widget-container{padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-31539 .elementor-element.elementor-element-a1fb478{--content-width:1180px;}}/* Start custom CSS for html, class: .elementor-element-2cd1d1f */#signature-resizer-wrapper { 
    width: 100%; 
}

.signature-resizer-container { 
    display: grid; 
    grid-template-columns: 1.5fr 1fr; 
    gap: 24px;
}

.signature-resizer-panel { 
    background: #fff; 
    padding: 24px; 
    border-radius: 16px; 
    border: 1px solid #f0f0f0; 
}

.section-title { 
    font-size: 16px; 
    font-weight: 700; 
    margin-bottom: 15px; 
    color: #1a1a1a; 
}

.upload-box { 
    width: 100%; 
    background: #f8fffb; 
    border: 2px dashed #18cb96; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
}

.upload-content { text-align: center; color: #166534; font-weight: 600; }

.canva-crop-viewport { 
    position: relative; 
    width: 100%; 
    background: #f4f4f4; 
    overflow: hidden; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    touch-action: pan-y; 
}

.cropping-active { touch-action: none !important; }

#previewImage { 
    max-width: 100%; 
    max-height: 600px; 
    display: block; 
    pointer-events: none; 
}

.crop-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 5; pointer-events: none; }

.crop-window { 
    position: absolute; 
    border: 2px solid #fff; 
    box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6); 
    cursor: grab; 
    z-index: 10; 
    pointer-events: auto; 
    background: transparent; 
}

.crop-window:active { cursor: grabbing; }

.handle { 
    position: absolute; 
    width: 16px; 
    height: 16px; 
    background: #fff; 
    border: 2px solid #18cb96; 
    border-radius: 50%; 
    z-index: 11;
}

.tl { top: -8px; left: -8px; cursor: nw-resize; }
.tr { top: -8px; right: -8px; cursor: ne-resize; }
.bl { bottom: -8px; left: -8px; cursor: sw-resize; }
.br { bottom: -8px; right: -8px; cursor: se-resize; }
.top { top: -6px; left: 50%; transform: translateX(-50%); width: 30px; height: 8px; cursor: n-resize; border-radius: 4px; }
.bottom { bottom: -6px; left: 50%; transform: translateX(-50%); width: 30px; height: 8px; cursor: s-resize; border-radius: 4px; }
.left { left: -6px; top: 50%; transform: translateY(-50%); height: 30px; width: 8px; cursor: w-resize; border-radius: 4px; }
.right { right: -6px; top: 50%; transform: translateY(-50%); height: 30px; width: 8px; cursor: e-resize; border-radius: 4px; }

.preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.preview-btn { width: 40px; height: 40px; border-radius: 8px; border: none; cursor: pointer; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.toolbar-action-btn { padding: 10px 18px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; }
.done-btn { background: #18cb96; color: white; }
.cancel-btn { background: #f1f1f1; color: #666; }

.inline-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.inline-group input { width: 90px; padding: 10px; border-radius: 8px; border: 1px solid #ddd; text-align: center; font-weight: 600; }
.pill-group { display: flex; gap: 5px; background: #f4f4f4; padding: 4px; border-radius: 12px; }
.pill-button { flex: 1; padding: 8px; border-radius: 8px; border: none; cursor: pointer; background: transparent; font-weight: 600; color: #666; font-size: 13px; }
.pill-button.active { background: #fff; color: #18cb96; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.signature-resizer-action-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.filter-row { display: flex; gap: 10px; }
.filter-btn { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #eee; cursor: pointer; font-weight: 700; }
.brighten-btn { background: #fff; color: #18cb96; border-color: #18cb96; }
.gray-btn { background: #000; color: #fff; border: none; }
.signature-resizer-downloadbutton { background: #18cb96; color: #fff; padding: 16px; border-radius: 12px; border: none; font-weight: 800; cursor: pointer; font-size: 16px; }
.status-msg { font-size: 12px; color: #18cb96; margin-top: 10px; text-align: center; font-weight: 700; }

@media (max-width: 850px) {
    .signature-resizer-container { grid-template-columns: 1fr; }
}/* End custom CSS */