.elementor-307 .elementor-element.elementor-element-dfbfee1{--display:flex;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-307 .elementor-element.elementor-element-852bde5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-307 .elementor-element.elementor-element-852bde5{text-align:center;}.elementor-307 .elementor-element.elementor-element-852bde5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:42px;font-weight:700;color:#202122;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-307 .elementor-element.elementor-element-b9f90f9.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-307 .elementor-element.elementor-element-b9f90f9{text-align:center;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;}.elementor-307 .elementor-element.elementor-element-ae21c63{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-307 .elementor-element.elementor-element-6418575 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-307 .elementor-element.elementor-element-6418575.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-307 .elementor-element.elementor-element-c567174{--display:flex;}.elementor-307 .elementor-element.elementor-element-ee22019{--spacer-size:158px;}.elementor-307 .elementor-element.elementor-element-ee22019.xpro-widget-bg-overlay:before{transition:background 0.3s;}body.elementor-page-307:not(.elementor-motion-effects-element-type-background), body.elementor-page-307 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F7FA;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-307 .elementor-element.elementor-element-852bde5 .elementor-heading-title{font-size:36px;}.elementor-307 .elementor-element.elementor-element-b9f90f9 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-307 .elementor-element.elementor-element-b9f90f9{font-size:18px;}.elementor-307 .elementor-element.elementor-element-6418575 > .elementor-widget-container{padding:10px 10px 10px 10px;}}/* Start custom CSS for html, class: .elementor-element-6418575 *//* --- Image Resizer & Cropper Widget Styles --- */
/* Make sure the Elementor HTML Widget has the class "image-resizer-cropper-widget" */

.image-resizer-cropper-widget {
    font-family: 'Poppins', sans-serif; /* Ensure font loads if not default */
    color: #333;
    --primary-color: #4a90e2;
    --secondary-color: #f5f7fa;
    --text-color: #333;
    --border-color: #dce1e6;
    --success-color: #50e3c2;
    --danger-color: #e35050;
    --light-gray: #e0e0e0;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    /* Removed page-level background and padding */
}

.image-resizer-cropper-widget * { /* Basic Reset within widget scope */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling for the main Resizer Tool container */
.image-resizer-cropper-widget .resizer-container {
    background-color: var(--white);
    padding: 2rem; /* Reduced padding slightly */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    /* max-width: 900px; Remove fixed max-width, let Elementor column control it */
    text-align: center;
    margin: 0 auto 2rem; /* Center if column is wider, add bottom margin */
}

/* Styling for the Features container */
.image-resizer-cropper-widget .features-container {
    background-color: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    /* max-width: 900px; Remove fixed max-width */
    margin: 0 auto; /* Center if column is wider */
    text-align: left;
}

.image-resizer-cropper-widget h1 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.7rem; /* Adjust size */
    font-weight: 600;
    line-height: 1.3;
}

.image-resizer-cropper-widget h1 i {
    margin-right: 0.5rem;
    /* Font Awesome relies on Elementor loading it */
}

.image-resizer-cropper-widget h2 {
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #555;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    font-size: 1.2rem; /* Adjust size */
}

/* Features Section (Inner content styling) */
.image-resizer-cropper-widget .features-section h3 {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.image-resizer-cropper-widget .features-section ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}
.image-resizer-cropper-widget .features-section li {
    margin-bottom: 0.6rem;
    padding-left: 1.8rem;
    position: relative;
    font-size: 0.9rem; /* Adjusted size */
    color: #444;
    line-height: 1.5;
}
.image-resizer-cropper-widget .features-section li::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 5 Free"; /* Check Elementor's FA version */
    font-weight: 900; /* Required for solid icons */
    color: var(--success-color);
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.9rem;
}

/* --- Main Resizer Area Layout --- */
.image-resizer-cropper-widget .resizer-area {
    display: flex;
    flex-direction: column; /* Stack vertically by default */
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Responsive: Side-by-side on larger screens */
@media (min-width: 768px) {
    .image-resizer-cropper-widget .resizer-area {
        flex-direction: row;
        align-items: flex-start;
    }
    .image-resizer-cropper-widget .input-area {
        flex: 1 1 50%; /* Allow shrinking/growing, base 50% */
        min-width: 280px; /* Min width before wrapping potentially */
    }
    .image-resizer-cropper-widget .controls-area {
        flex: 1 1 45%; /* Allow shrinking/growing, base 45% */
        max-width: 400px; /* Optional: Limit controls width */
    }
}

/* Input Area */
.image-resizer-cropper-widget .input-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem; /* Adjusted padding */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.image-resizer-cropper-widget .input-area.dragover {
    border-color: var(--primary-color);
    background-color: #e9f1fc;
}
.image-resizer-cropper-widget .file-drop-area {
    text-align: center; color: #888; padding: 1.5rem;
}
.image-resizer-cropper-widget .file-drop-area i {
    color: var(--primary-color); margin-bottom: 1rem; font-size: 2.5em;
}
.image-resizer-cropper-widget .file-input-label {
    background-color: var(--primary-color); color: var(--white);
    padding: 0.6rem 1.2rem; border-radius: var(--border-radius);
    cursor: pointer; display: inline-block; transition: background-color 0.3s ease;
    margin-top: 0.5rem; font-size: 0.9rem;
}
.image-resizer-cropper-widget .file-input-label:hover { background-color: #3a7bc8; }

/* Image Preview */
.image-resizer-cropper-widget .image-preview-area {
    position: relative; text-align: center; width: 100%; margin-top: 1rem;
}
.image-resizer-cropper-widget #imagePreview {
    display: block; max-width: 100%; height: auto;
    margin: 0 auto 0.5rem; border-radius: var(--border-radius);
}
.image-resizer-cropper-widget #fileName,
.image-resizer-cropper-widget #originalDimensions {
    font-size: 0.8rem; color: #666; margin-top: 0.3rem; word-break: break-all;
}
.image-resizer-cropper-widget .remove-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0, 0, 0, 0.6); color: white; border: none;
    border-radius: 50%; width: 25px; height: 25px; font-size: 0.8rem;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: background 0.3s ease; z-index: 10;
}
.image-resizer-cropper-widget .remove-btn:hover { background: var(--danger-color); }

/* Controls Area */
.image-resizer-cropper-widget .controls-area {
    text-align: left; padding: 1.5rem; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); background-color: #fdfdfd;
}
.image-resizer-cropper-widget .control-group {
    margin-bottom: 1.5rem; transition: opacity 0.3s ease;
}
.image-resizer-cropper-widget .control-group label {
    display: block; margin-bottom: 0.5rem; font-weight: 400;
    color: #555; transition: opacity 0.3s ease; font-size: 0.9rem;
}

/* Crop Controls */
.image-resizer-cropper-widget .crop-controls h2 { margin-bottom: 0.8rem; border-bottom: none; padding-bottom: 0; }
.image-resizer-cropper-widget .crop-buttons { display: flex; gap: 10px; margin-bottom: 0.5rem; flex-wrap: wrap; }
.image-resizer-cropper-widget .crop-btn {
    padding: 0.5rem 0.8rem; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); cursor: pointer; font-size: 0.85rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    background-color: var(--white); color: var(--text-color);
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.image-resizer-cropper-widget .crop-btn:hover { background-color: #f0f0f0; border-color: #ccc; }
.image-resizer-cropper-widget .crop-btn.success { background-color: var(--success-color); border-color: var(--success-color); color: var(--white); }
.image-resizer-cropper-widget .crop-btn.success:hover { background-color: #48cfa9; border-color: #48cfa9; }
.image-resizer-cropper-widget .crop-btn.danger { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--white); }
.image-resizer-cropper-widget .crop-btn.danger:hover { background-color: #c84040; border-color: #c84040; }

/* Cropper.js Specific Adjustments */
.cropper-container { margin-bottom: 1rem; /* Ensure space below cropper UI */ }

/* Radio Buttons */
.image-resizer-cropper-widget .radio-group label {
    display: inline-block; margin-right: 1rem; margin-bottom: 0;
    cursor: pointer; position: relative; padding-left: 25px;
    transition: opacity 0.3s ease; font-size: 0.9rem;
}
.image-resizer-cropper-widget .radio-group input[type="radio"] { display: none; }
.image-resizer-cropper-widget .radio-group label:before {
    content: ''; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border: 2px solid var(--border-color);
    border-radius: 50%; background: var(--white);
}
.image-resizer-cropper-widget .radio-group input[type="radio"]:checked + label:before { border-color: var(--primary-color); }
.image-resizer-cropper-widget .radio-group label:after {
    content: ''; position: absolute; left: 4px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary-color); opacity: 0; transform: scale(0);
    transition: all 0.2s ease-in-out;
}
.image-resizer-cropper-widget .radio-group input[type="radio"]:checked + label:after { opacity: 1; transform: scale(1); }

/* Dimension Inputs */
.image-resizer-cropper-widget .dimension-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-resizer-cropper-widget .input-with-label { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 100px; /* Reduced min-width */ }
.image-resizer-cropper-widget .input-with-label.full-width { flex-basis: 100%; }
.image-resizer-cropper-widget .input-with-label label { margin-bottom: 0; white-space: nowrap; }
.image-resizer-cropper-widget .input-with-label input[type="number"],
.image-resizer-cropper-widget select#formatSelect {
    width: 100%; padding: 0.5rem; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    -moz-appearance: textfield; /* Firefox */
}
.image-resizer-cropper-widget .input-with-label input[type="number"]::-webkit-outer-spin-button,
.image-resizer-cropper-widget .input-with-label input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0; /* Chrome, Safari, Edge, Opera */
}
.image-resizer-cropper-widget .input-with-label input[type="number"]:focus,
.image-resizer-cropper-widget select#formatSelect:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    outline: none;
}
.image-resizer-cropper-widget .input-with-label input[type="number"]:disabled,
.image-resizer-cropper-widget select#formatSelect:disabled {
    background-color: #f0f0f0; cursor: not-allowed; opacity: 0.7;
}
.image-resizer-cropper-widget .input-with-label span { color: #888; font-size: 0.85rem; margin-left: -5px; }

/* Aspect Lock Button */
.image-resizer-cropper-widget .aspect-lock { display: flex; align-items: center; padding-top: 22px; /* Rough alignment */ }
.image-resizer-cropper-widget .lock-btn {
    background: none; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); color: #888; cursor: pointer;
    padding: 0.5rem; font-size: 0.9rem; /* Adjusted size */
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    width: 36px; height: 36px; /* Adjusted size */
    display: flex; justify-content: center; align-items: center;
}
.image-resizer-cropper-widget .lock-btn.active { color: var(--primary-color); border-color: var(--primary-color); background-color: #e9f1fc; }
.image-resizer-cropper-widget .lock-btn:hover { border-color: #aaa; }
.image-resizer-cropper-widget .lock-btn.active:hover { border-color: #3a7bc8; background-color: #dbe9f9; }
.image-resizer-cropper-widget .lock-btn:disabled { background-color: #f0f0f0; cursor: not-allowed; opacity: 0.7; border-color: var(--border-color); color: #aaa; }

/* Quality Slider */
.image-resizer-cropper-widget #qualityControl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-resizer-cropper-widget #qualityControl label { margin-bottom: 0; }
.image-resizer-cropper-widget #qualitySlider {
    flex-grow: 1; cursor: pointer; height: 6px; appearance: none;
    background: var(--light-gray); border-radius: 5px; outline: none;
    transition: opacity 0.3s ease, background-color 0.3s ease; min-width: 100px;
}
.image-resizer-cropper-widget #qualitySlider::-webkit-slider-thumb {
    appearance: none; width: 16px; height: 16px;
    background: var(--primary-color); border-radius: 50%;
    cursor: pointer; transition: background-color 0.3s ease;
}
.image-resizer-cropper-widget #qualitySlider::-moz-range-thumb {
    width: 16px; height: 16px; background: var(--primary-color);
    border-radius: 50%; cursor: pointer; border: none;
    transition: background-color 0.3s ease;
}
.image-resizer-cropper-widget #qualitySlider:disabled { background-color: #e0e0e0; cursor: not-allowed; opacity: 0.7; }
.image-resizer-cropper-widget #qualitySlider:disabled::-webkit-slider-thumb { background-color: #b0b0b0; cursor: not-allowed; }
.image-resizer-cropper-widget #qualitySlider:disabled::-moz-range-thumb { background-color: #b0b0b0; cursor: not-allowed; }
.image-resizer-cropper-widget #qualityValue { font-weight: 600; min-width: 40px; text-align: right; color: var(--primary-color); font-size: 0.9rem; }

/* Output Info */
.image-resizer-cropper-widget .output-info {
    margin-top: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem;
    color: #555; background-color: #f0f4f8; padding: 0.5rem 1rem;
    border-radius: var(--border-radius); border: 1px solid var(--border-color);
}
.image-resizer-cropper-widget .output-info span { font-weight: 600; color: var(--primary-color); }

/* Buttons Base Style */
.image-resizer-cropper-widget .action-btn {
    color: var(--white); border: none; padding: 0.7rem 1.2rem; /* Adjusted padding */
    border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; /* Adjusted size */
    font-weight: 600; transition: background-color 0.3s ease, transform 0.1s ease, color 0.3s ease, opacity 0.3s ease;
    width: 100%; margin-top: 1rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;
}
.image-resizer-cropper-widget .action-btn:active { transform: scale(0.98); }
.image-resizer-cropper-widget .action-btn:disabled { background-color: var(--light-gray); cursor: not-allowed; color: #999; }
.image-resizer-cropper-widget .action-btn:disabled i { color: #999; }

/* Download Button Specific */
.image-resizer-cropper-widget .download-btn { background-color: var(--success-color); }
.image-resizer-cropper-widget .download-btn:hover:not(:disabled) { background-color: #48cfa9; }

/* New Photo Button Specific */
.image-resizer-cropper-widget .new-photo-btn { background-color: var(--primary-color); }
.image-resizer-cropper-widget .new-photo-btn:hover:not(:disabled) { background-color: #3a7bc8; }

/* Utility */
.image-resizer-cropper-widget [hidden],
.image-resizer-cropper-widget [style*="display: none"] { display: none !important; }/* End custom CSS */