/* style.css */

#artwork-comparer-block-standalone {
    --tool-primary-color: #28a745; --tool-primary-hover-color: #218838; --tool-text-color: #212529; --tool-secondary-text-color: #6c757d; --tool-bg-color: #f7f8f9; --tool-controls-bg-color: #FFFFFF; --tool-canvas-column-bg-color: #f8f9fa; --tool-section-border-color: #dee2e6; --tool-input-border-color: #ced4da; --tool-border-radius: 6px; --tool-control-padding: 15px; --tool-control-gap: 15px; --tool-input-height: 40px; --tool-label-width: 120px;
    font-family: 'Poppins', sans-serif; background-color: var(--tool-bg-color); color: var(--tool-text-color); font-size: 14px; line-height: 1.6; padding: 1px; border: 1px solid var(--tool-section-border-color); border-radius: var(--tool-border-radius); margin: 2rem auto; max-width: 1600px;
}
#artwork-comparer-block-standalone * { box-sizing: border-box; margin: 0; padding: 0; }
#artwork-comparer-block-standalone .main-layout { display: flex; padding: var(--tool-control-padding); box-sizing: border-box; gap: var(--tool-control-gap); margin: 0 auto; }

/* --- MODIFIED & NEW STYLES START HERE --- */
#artwork-comparer-block-standalone h2 {
    text-align: center;
    color: var(--tool-text-color);
    margin: 20px 0 10px 0; /* Reduced bottom margin */
    padding-bottom: 5px;
    font-size: 1.6em;
    font-weight: 600;
    border: none;
}
#artwork-comparer-block-standalone .tool-description {
    text-align: center;
    color: var(--tool-secondary-text-color);
    font-size: 1em;
    margin: 0 auto 25px auto; /* 0 top, auto left/right, 25px bottom */
    max-width: 600px; /* Constrain line width for readability */
}
/* --- MODIFIED & NEW STYLES END HERE --- */

#artwork-comparer-block-standalone .controls { flex: 0 0 400px; background-color: var(--tool-controls-bg-color); padding: 20px; border-radius: var(--tool-border-radius); border: 1px solid var(--tool-section-border-color); overflow-y: auto; max-height: 85vh; box-sizing: border-box; }
#artwork-comparer-block-standalone .controls::-webkit-scrollbar { width: 8px; } #artwork-comparer-block-standalone .controls::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px;} #artwork-comparer-block-standalone .controls::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 4px;} #artwork-comparer-block-standalone .controls::-webkit-scrollbar-thumb:hover { background: #868e96; }
#artwork-comparer-block-standalone .canvas-column { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 500px; background-color: var(--tool-canvas-column-bg-color); border-radius: var(--tool-border-radius); border: 1px solid var(--tool-section-border-color); padding: 15px; box-sizing: border-box; position: relative; }
#artwork-comparer-block-standalone .canvas-container { width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; min-height: 400px; background-color: #fff; border-radius: var(--tool-border-radius); }
#artwork-comparer-block-standalone #comparisonCanvas { border: 1px dashed #adb5bd; display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: crosshair; background-color: #e9ecef; }
#artwork-comparer-block-standalone #canvasInstructions, #artwork-comparer-block-standalone #dragInstructions { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.75); color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.9em; z-index: 5; text-align: center; pointer-events: none; font-weight: 500;}
#artwork-comparer-block-standalone #dragInstructions { bottom: 45px; }
#artwork-comparer-block-standalone .control-section { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--tool-section-border-color); }
#artwork-comparer-block-standalone .control-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
#artwork-comparer-block-standalone .control-section h3 { font-size: 1.2em; font-weight: 600; color: var(--tool-primary-color); margin-top: 0; margin-bottom: 18px; border-bottom: 1px solid var(--tool-section-border-color); padding-bottom: 8px; text-align: left; }
#artwork-comparer-block-standalone .control-section h3 .artwork-index { font-weight: normal; font-size: 0.9em; color: var(--tool-secondary-text-color); }
#artwork-comparer-block-standalone .control-section p { margin-top: 0; margin-bottom: 12px; font-size: 0.95em; color: var(--tool-secondary-text-color); max-width: none; text-align: left;}
#artwork-comparer-block-standalone .control-section small { font-size: 0.85em; color: var(--tool-secondary-text-color); display: block; margin-top: 5px; text-align: left;}
#artwork-comparer-block-standalone .input-row { display: flex; align-items: center; margin-bottom: 15px; gap: 10px; flex-wrap: wrap; }
#artwork-comparer-block-standalone .input-row label { font-family: 'Poppins', sans-serif; color: var(--tool-text-color); }
#artwork-comparer-block-standalone .input-row label:first-child:not(.inline-label) { flex: 0 0 var(--tool-label-width); font-weight: 500; text-align: right; padding-right: 10px; margin-bottom: 0; }
#artwork-comparer-block-standalone .input-row label.inline-label { flex-basis: auto; text-align: left; padding-right: 0; font-weight: 400; margin-bottom: 0; }
#artwork-comparer-block-standalone .input-row input[type="file"] { flex-grow: 1; font-size: 0.9em; font-family: 'Poppins', sans-serif; max-width: calc(100% - var(--tool-label-width) - 10px); }
#artwork-comparer-block-standalone .input-row input[type="number"], #artwork-comparer-block-standalone .input-row select { padding: 8px 12px; border: 1px solid var(--tool-input-border-color); border-radius: var(--tool-border-radius); width: 85px; height: var(--tool-input-height); box-sizing: border-box; font-size: 0.95em; font-family: 'Poppins', sans-serif; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#artwork-comparer-block-standalone .input-row input[type="number"]:focus, #artwork-comparer-block-standalone .input-row select:focus { border-color: var(--tool-primary-color); box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2); outline: none; }
#artwork-comparer-block-standalone .input-row select { width: auto; flex-grow: 1; max-width: 110px; }
#artwork-comparer-block-standalone .input-row input[type="radio"], #artwork-comparer-block-standalone .input-row input[type="checkbox"] { margin-right: 5px; accent-color: var(--tool-primary-color); vertical-align: middle; }
#artwork-comparer-block-standalone .effects-section .input-row label:first-child { flex-basis: 100px; text-align: right; }
#artwork-comparer-block-standalone .effects-section input[type="range"], #artwork-comparer-block-standalone .measurement-section input[type="range"] { flex-grow: 1; min-width: 100px; max-width: 180px; height: 6px; cursor: pointer; accent-color: var(--tool-primary-color); background: #e9ecef; border-radius: 3px; appearance: none; -webkit-appearance: none; }
#artwork-comparer-block-standalone .effects-section input[type=range]::-webkit-slider-thumb, #artwork-comparer-block-standalone .measurement-section input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; background: var(--tool-primary-color); border-radius: 50%; cursor: pointer; margin-top: -5px; }
#artwork-comparer-block-standalone .effects-section input[type=range]::-moz-range-thumb, #artwork-comparer-block-standalone .measurement-section input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--tool-primary-color); border-radius: 50%; cursor: pointer; border: none; }
#artwork-comparer-block-standalone .effects-section span.value-display, #artwork-comparer-block-standalone .measurement-section span.value-display { font-weight: 500; min-width: 40px; text-align: right; font-family: monospace; }
#artwork-comparer-block-standalone .effects-section input[type="color"] { padding: 0; border: none; width: 36px; height: 30px; vertical-align: middle; cursor: pointer; border: 1px solid var(--tool-input-border-color); border-radius: 4px; overflow: hidden; }
#artwork-comparer-block-standalone #colorSwatch, #artwork-comparer-block-standalone #shadowColorSwatch { display: inline-block; width: 28px; height: 28px; border: 1px solid #adb5bd; margin-left: 8px; vertical-align: middle; border-radius: 4px; background-color: #ffffff; flex-shrink: 0; }
#artwork-comparer-block-standalone .opacity-control-group, #artwork-comparer-block-standalone .shadow-control-group, #artwork-comparer-block-standalone .dimension-style-control-group, #artwork-comparer-block-standalone .marking-style-control-group { margin-top: 15px; margin-bottom: 10px; }
#artwork-comparer-block-standalone .opacity-control-group .label-value-line, #artwork-comparer-block-standalone .shadow-control-group .label-value-line, #artwork-comparer-block-standalone .dimension-style-control-group .label-value-line, #artwork-comparer-block-standalone .marking-style-control-group .label-value-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#artwork-comparer-block-standalone .opacity-control-group .label-value-line label, #artwork-comparer-block-standalone .shadow-control-group .label-value-line label, #artwork-comparer-block-standalone .dimension-style-control-group .label-value-line label, #artwork-comparer-block-standalone .marking-style-control-group .label-value-line label { font-weight: 500; margin-bottom: 0; flex-basis: auto; text-align: left; padding-right: 10px; }
#artwork-comparer-block-standalone .opacity-control-group input[type="range"], #artwork-comparer-block-standalone .shadow-control-group input[type="range"], #artwork-comparer-block-standalone .dimension-style-control-group input[type="range"], #artwork-comparer-block-standalone .marking-style-control-group input[type="range"] { width: 100%; max-width: none; }
#artwork-comparer-block-standalone .save-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--tool-section-border-color); text-align: center; }
#artwork-comparer-block-standalone #saveButton { padding: 12px 30px; background-color: var(--tool-primary-color); color: white; border: none; border-radius: var(--tool-border-radius); font-size: 1.05em; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; letter-spacing: 0.5px; }
#artwork-comparer-block-standalone #saveButton:disabled { background-color: var(--tool-secondary-text-color); cursor: not-allowed; opacity: 0.6; }
#artwork-comparer-block-standalone #saveButton:hover:not(:disabled) { background-color: var(--tool-primary-hover-color); }
#artwork-comparer-block-standalone #saveButton:active:not(:disabled) { transform: scale(0.98); }
#artwork-comparer-block-standalone .highlight-text { color: var(--tool-primary-color); font-weight: 600; }
#artwork-comparer-block-standalone .info-sections { padding: 0 var(--tool-control-padding) var(--tool-control-padding); margin: 20px auto 0; }
#artwork-comparer-block-standalone .info-section-item { margin-bottom: 15px; text-align: left; }
#artwork-comparer-block-standalone .info-section-item summary { font-weight: 600; cursor: pointer; padding: 10px 0; border-bottom: 1px solid var(--tool-section-border-color); margin-bottom: 10px; color: var(--tool-text-color); list-style-position: inside; font-family: 'Poppins', sans-serif; }
#artwork-comparer-block-standalone .info-section-item summary::marker { content: '\25BC \00a0'; font-size: 0.8em; margin-right: 5px; }
#artwork-comparer-block-standalone .info-section-item[open] > summary::marker { content: '\25B2 \00a0'; }
#artwork-comparer-block-standalone .info-content { color: var(--tool-secondary-text-color); padding-left: 5px; }
#artwork-comparer-block-standalone .info-content p { text-align: left; max-width: none; margin-bottom: 10px; font-size: 0.95em;}
#artwork-comparer-block-standalone .info-content ol, #artwork-comparer-block-standalone .info-content ul { padding-left: 25px; margin-top: 0; margin-bottom: 10px; }
#artwork-comparer-block-standalone .info-content li { margin-bottom: 8px; font-size: 0.95em;}
#artwork-comparer-block-standalone .dimension-toggle-row { justify-content: flex-start; margin-top: 20px; }
#artwork-comparer-block-standalone .dimension-toggle-row label { flex: 0 0 auto; font-weight: 500; text-align: left; padding-right: 10px; }
#artwork-comparer-block-standalone #shadowOptionsContainer { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--tool-section-border-color); }
#artwork-comparer-block-standalone .effects-section #shadowOptionsContainer .input-row label:first-child { flex-basis: 100px; text-align: right; }
#artwork-comparer-block-standalone .effects-section #shadowOptionsContainer .shadow-control-group .label-value-line label { flex-basis: auto; text-align: left; }
#artwork-comparer-block-standalone #dimensionStyleOptionsContainer { margin-top: 20px; padding-top: 15px; border-top: 1px dashed var(--tool-section-border-color); }
#artwork-comparer-block-standalone .artwork-item-controls { border: 1px dashed var(--tool-input-border-color); border-radius: var(--tool-border-radius); padding: 15px; margin-bottom: 20px; background-color: #fff; position: relative; }
#artwork-comparer-block-standalone .artwork-item-controls h4 { font-size: 1.1em; font-weight: 600; color: var(--tool-text-color); margin: 0 0 15px 0; padding-bottom: 8px; border-bottom: 1px solid var(--tool-section-border-color); display: flex; justify-content: space-between; align-items: center; }
#artwork-comparer-block-standalone .remove-artwork-btn { background: none; border: none; color: #dc3545; font-size: 1.1em; cursor: pointer; padding: 2px 5px; line-height: 1; font-weight: bold; }
#artwork-comparer-block-standalone .remove-artwork-btn:hover { color: #a71d2a; }
#artwork-comparer-block-standalone #addArtworkBtn { display: block; width: 100%; padding: 10px 20px; margin-top: 15px; background-color: var(--tool-primary-color); color: white; border: none; border-radius: var(--tool-border-radius); font-size: 1em; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; text-align: center; }
#artwork-comparer-block-standalone #addArtworkBtn:disabled { background-color: var(--tool-secondary-text-color); cursor: not-allowed; opacity: 0.65; }
#artwork-comparer-block-standalone #addArtworkBtn:hover:not(:disabled) { background-color: var(--tool-primary-hover-color); }
#artwork-comparer-block-standalone .artwork-item-controls .input-row label:first-child:not(.inline-label) { flex: 0 0 100px; text-align: right; }
#artwork-comparer-block-standalone .artwork-item-controls .input-row input[type="file"] { max-width: calc(100% - 100px - 10px); }
@media (max-width: 992px) { #artwork-comparer-block-standalone .main-layout { flex-direction: column; height: auto; overflow: auto; } #artwork-comparer-block-standalone .controls { flex: 1 1 auto; max-height: none; height: auto; margin-bottom: 20px; width: auto; flex-basis: auto;} #artwork-comparer-block-standalone .canvas-column { flex: 1 1 auto; height: 65vh; min-height: 450px; margin-top: 0; } #artwork-comparer-block-standalone h2 { margin-top: 20px; margin-bottom: 20px; font-size: 1.5em; } }
@media (max-width: 768px) { #artwork-comparer-block-standalone .input-row label:first-child:not(.inline-label), #artwork-comparer-block-standalone .artwork-item-controls .input-row label:first-child:not(.inline-label) { flex-basis: 100px; text-align: left; padding-right: 0; } #artwork-comparer-block-standalone .artwork-item-controls .input-row input[type="file"] { max-width: 100%; } #artwork-comparer-block-standalone h2 { font-size: 1.4em; } #artwork-comparer-block-standalone .controls { padding: 15px; } #artwork-comparer-block-standalone .canvas-column { padding: 10px; min-height: 400px;} #artwork-comparer-block-standalone .input-row input[type="file"] { max-width: 100%; } #artwork-comparer-block-standalone .effects-section .input-row label:first-child, #artwork-comparer-block-standalone .effects-section #shadowOptionsContainer .input-row label:first-child { flex-basis: 100px; text-align: left; } #artwork-comparer-block-standalone .dimension-style-control-group .label-value-line label, #artwork-comparer-block-standalone .marking-style-control-group .label-value-line label { text-align: left; } #artwork-comparer-block-standalone .measurement-section span.value-display { min-width: 30px; } }
@media (max-width: 576px) { #artwork-comparer-block-standalone .controls { flex-basis: auto; } #artwork-comparer-block-standalone .input-row label:first-child:not(.inline-label), #artwork-comparer-block-standalone .artwork-item-controls .input-row label:first-child:not(.inline-label), #artwork-comparer-block-standalone .effects-section .input-row label:first-child, #artwork-comparer-block-standalone .effects-section #shadowOptionsContainer .input-row label:first-child { flex-basis: 100%; text-align: left; } #artwork-comparer-block-standalone .dimension-style-control-group .label-value-line label, #artwork-comparer-block-standalone .marking-style-control-group .label-value-line label { flex-basis: auto; text-align: left; } }