/* Styles for the Online Mockup Tool */

/* --- CORE VARIABLES AND THEME --- */
/*
  Variables are now scoped to the tool's container ID.
  This prevents them from overriding your main website's styles.
*/
#wp-mockup-tool-container-v61 {
    /* Icons as CSS Variables */
    --icon-sun: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="5"%3E%3C/circle%3E%3Cline x1="12" y1="1" x2="12" y2="3"%3E%3C/line%3E%3Cline x1="12" y1="21" x2="12" y2="23"%3E%3C/line%3E%3Cline x1="4.22" y1="4.22" x2="5.64" y2="5.64"%3E%3C/line%3E%3Cline x1="18.36" y1="18.36" x2="19.78" y2="19.78"%3E%3C/line%3E%3Cline x1="1" y1="12" x2="3" y2="12"%3E%3C/line%3E%3Cline x1="21" y1="12" x2="23" y2="12"%3E%3C/line%3E%3Cline x1="4.22" y1="19.78" x2="5.64" y2="18.36"%3E%3C/line%3E%3Cline x1="18.36" y1="5.64" x2="19.78" y2="4.22"%3E%3C/line%3E%3C/svg%3E');
    --icon-moon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"%3E%3C/path%3E%3C/svg%3E');
    --icon-maximize: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"%3E%3C/path%3E%3C/svg%3E');
    --icon-minimize: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"%3E%3C/path%3E%3C/svg%3E');
    --icon-select: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"%3E%3C/path%3E%3Cpath d="M13 13l6 6"%3E%3C/path%3E%3C/svg%3E');
    --icon-pan: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 11.5V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1.4M14 11.5V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4.3M10 16.5V14a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4.5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-4.5a2 2 0 0 0-2-2h-2"%3E%3C/path%3E%3C/svg%3E');
    --icon-zoom: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="8"%3E%3C/circle%3E%3Cline x1="21" y1="21" x2="16.65" y2="16.65"%3E%3C/line%3E%3Cline x1="11" y1="8" x2="11" y2="14"%3E%3C/line%3E%3Cline x1="8" y1="11" x2="14" y2="11"%3E%3C/line%3E%3C/svg%3E');
    --icon-reset-view: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="23 4 23 10 17 10"%3E%3C/polyline%3E%3Cpolyline points="1 20 1 14 7 14"%3E%3C/polyline%3E%3Cpath d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"%3E%3C/path%3E%3C/svg%3E');
    --icon-properties: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cline x1="4" y1="21" x2="4" y2="14"%3E%3C/line%3E%3Cline x1="4" y1="10" x2="4" y2="3"%3E%3C/line%3E%3Cline x1="12" y1="21" x2="12" y2="12"%3E%3C/line%3E%3Cline x1="12" y1="8" x2="12" y2="3"%3E%3C/line%3E%3Cline x1="20" y1="21" x2="20" y2="16"%3E%3C/line%3E%3Cline x1="20" y1="12" x2="20" y2="3"%3E%3C/line%3E%3Cline x1="1" y1="14" x2="7" y2="14"%3E%3C/line%3E%3Cline x1="9" y1="8" x2="15" y2="8"%3E%3C/line%3E%3Cline x1="17" y1="16" x2="23" y2="16"%3E%3C/line%3E%3C/svg%3E');
    --icon-guides: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"%3E%3C/path%3E%3Ccircle cx="12" cy="12" r="3"%3E%3C/circle%3E%3C/svg%3E');
    --icon-undo: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="1 4 1 10 7 10"%3E%3C/polyline%3E%3Cpath d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"%3E%3C/path%3E%3C/svg%3E');
    --icon-redo: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="23 4 23 10 17 10"%3E%3C/polyline%3E%3Cpath d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"%3E%3C/path%3E%3C/svg%3E');
    --icon-upload-bg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"%3E%3C/rect%3E%3Ccircle cx="8.5" cy="8.5" r="1.5"%3E%3C/circle%3E%3Cpolyline points="21 15 16 10 5 21"%3E%3C/polyline%3E%3C/svg%3E');
    --icon-add-artwork: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"%3E%3C/rect%3E%3Cline x1="12" y1="8" x2="12" y2="16"%3E%3C/line%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E');
    --icon-add-color-layer: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z" fill="white"/%3E%3Cpath d="M22 12c0 6-10 10-10 10S2 18 2 12 7.33 2 12 2s10 4 10 10z"%3E%3C/path%3E%3C/svg%3E');
    --icon-save-project: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"%3E%3C/path%3E%3Cpolyline points="17 21 17 13 7 13 7 21"%3E%3C/polyline%3E%3Cpolyline points="7 3 7 8 15 8"%3E%3C/polyline%3E%3C/svg%3E');
    --icon-open-project: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2z"%3E%3C/path%3E%3C/svg%3E');

    /* Dark Theme Variables (Default) */
    --bg-color: #2e2e2e;
    --panel-bg-color: #3c3c3c;
    --panel-border-color: #252525;
    --control-bg-color: #555555;
    --text-color: #e0e0e0;
    --text-color-muted: #9e9e9e;
    --accent-color: #2a9dff;
    --accent-color-hover: #50b3ff;
    --danger-color: #ff4d4d;
    --danger-color-hover: #ff7070;
    --warning-color: #ffc107;
    --warning-color-hover: #e0a800;
    --success-color: #28a745;
    --font-family: 'Inter', sans-serif;
}

#wp-mockup-tool-container-v61.light-theme {
    --bg-color: #f4f7f9;
    --panel-bg-color: #ffffff;
    --panel-border-color: #e1e4e8;
    --control-bg-color: #e9edf0;
    --text-color: #24292e;
    --text-color-muted: #586069;
    --accent-color: #0366d6;
}

/* --- MAIN TOOL CONTAINER --- */
#wp-mockup-tool-container-v61 {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--border-color, #e6e9ed);
    border-radius: var(--border-radius-lg, 14px);
    margin-bottom: 25px; 
    height: 90vh; 
    min-height: 700px;
    overflow: hidden;
    color: var(--text-color);
    position: relative;
}

#wp-mockup-tool-container-v61.fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    z-index: 99999;
    margin: 0;
}

/* --- VERTICAL TOOLBAR (RIGHT SIDE) --- */
#wp-mockup-tool-container-v61 #vertical-toolbar-v61 {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #2E7D32;
    border-left: 1px solid #1B5E20;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 5px;
    z-index: 20;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

#wp-mockup-tool-container-v61 .vertical-toolbar-button, 
#wp-mockup-tool-container-v61 .vertical-toolbar-label {
    background-color: transparent;
    border: 2px solid transparent;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
    -webkit-user-select: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
}

#wp-mockup-tool-container-v61 .vertical-toolbar-button:hover:not(:disabled),
#wp-mockup-tool-container-v61 .vertical-toolbar-label:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

#wp-mockup-tool-container-v61 .vertical-toolbar-button.active-tool {
    background-color: rgba(255, 255, 255, 0.25);
}

#wp-mockup-tool-container-v61 .vertical-toolbar-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Assign Icons to Buttons */
#theme-toggle-v61 { background-image: var(--icon-sun); }
#theme-toggle-v61.is-moon { background-image: var(--icon-moon); }
#fullscreen-toggle-v61 { background-image: var(--icon-maximize); }
#fullscreen-toggle-v61.is-minimized { background-image: var(--icon-minimize); }
#select-tool-button-v61 { background-image: var(--icon-select); }
#pan-tool-button-v61 { background-image: var(--icon-pan); }
#zoom-tool-button-v61 { background-image: var(--icon-zoom); }
#reset-view-button-v61 { background-image: var(--icon-reset-view); }
#properties-toggle-button-v61 { background-image: var(--icon-properties); }
#toggle-guides-button-v61 { background-image: var(--icon-guides); }
#undo-button-v61 { background-image: var(--icon-undo); }
#redo-button-v61 { background-image: var(--icon-redo); }
label[for="product-upload-v61"] { background-image: var(--icon-upload-bg); }
label[for="artwork-upload-input-v61"] { background-image: var(--icon-add-artwork); }
#add-color-layer-button-v61 { background-image: var(--icon-add-color-layer); }
#save-project-button-v61 { background-image: var(--icon-save-project); }
label[for="open-project-input-v61"] { background-image: var(--icon-open-project); }

#wp-mockup-tool-container-v61 .toolbar-separator {
    width: 80%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 10px 0;
}

#wp-mockup-tool-container-v61 input[type="file"] {
    display: none;
}

/* --- MAIN CONTENT & CANVAS AREA --- */
#wp-mockup-tool-container-v61 #main-content-area-v61 {
    position: absolute;
    top: 0;
    left: 0;
    right: 50px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#wp-mockup-tool-container-v61 .preview-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    position: relative;
}

#wp-mockup-tool-container-v61 .canvas-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

#wp-mockup-tool-container-v61 canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: transparent;
}

#wp-mockup-tool-container-v61 #status-v61 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85em;
    color: var(--text-color-muted);
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 4px;
    min-height: 1.2em;
    text-align: center;
    font-style: italic;
    z-index: 5;
}
.light-theme #status-v61 {
    background: rgba(255,255,255,0.6);
    color: #333;
}

#wp-mockup-tool-container-v61 .action-buttons-wrapper {
    position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

#wp-mockup-tool-container-v61 .action-buttons-wrapper button {
    font-size: 0.9em;
    padding: 8px 16px;
    width: auto;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    color: #fff;
}

#wp-mockup-tool-container-v61 #download-preview-button-v61 { background-color: #17a2b8; }
#wp-mockup-tool-container-v61 #order-psd-button-v61 { background-color: var(--success-color); }
#wp-mockup-tool-container-v61 #download-preview-button-v61:hover:not(:disabled) { background-color: #138496;}
#wp-mockup-tool-container-v61 #order-psd-button-v61:hover:not(:disabled) { background-color: #218838;}
#wp-mockup-tool-container-v61 .action-buttons-wrapper button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- FLOATING PROPERTIES PANEL --- */
#wp-mockup-tool-container-v61 #floating-properties-panel-v61 {
    position: absolute;
    top: 20px;
    right: 70px;
    left: auto;
    width: 320px;
    min-width: 300px;
    max-height: calc(100% - 40px);
    background-color: var(--panel-bg-color);
    border: 1px solid var(--panel-border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 30;
    display: none;
    flex-direction: column;
}

#wp-mockup-tool-container-v61 .panel-header {
    padding: 8px 12px;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid var(--panel-border-color);
    background-color: rgba(0,0,0,0.1);
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

#wp-mockup-tool-container-v61 .panel-close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: var(--text-color-muted);
    padding: 0 5px;
}

#wp-mockup-tool-container-v61 .panel-close-btn:hover { color: var(--text-color); }
#wp-mockup-tool-container-v61 .panel-content { overflow-y: auto; flex-grow: 1; }

.panel-content details {
    border-bottom: 1px solid var(--panel-border-color);
    margin-bottom: 0;
}
.panel-content details:last-of-type { border-bottom: none; }

.panel-content summary {
    padding: 12px 16px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    outline: none;
    transition: background-color 0.2s;
    position: relative;
    display: flex;
    align-items: center;
}
.panel-content summary::-webkit-details-marker { display: none; }
.panel-content summary::before { content: '▶'; font-size: 0.7em; margin-right: 10px; display: inline-block; transition: transform 0.2s ease-in-out; }
.panel-content details[open] > summary::before { transform: rotate(90deg); }
.panel-content summary:hover { background-color: rgba(0,0,0,0.1); }

.panel-content details[open] > summary {
    background-color: #4CAF50;
    color: #ffffff;
    border-bottom: 1px solid #388E3C;
    border-top: 1px solid #388E3C;
    margin-top: -1px;
}

.panel-content details[open] > summary .summary-icon { stroke: #ffffff; }
.panel-content details[open] > summary:hover { background-color: #5cb85c; }
.panel-content .summary-icon { width: 16px; height: 16px; margin-right: 10px; stroke-width: 2.5; opacity: 0.7; flex-shrink: 0; stroke: var(--text-color); fill: none; }
#wp-mockup-tool-container-v61.light-theme .panel-content summary:hover { background-color: #f1f1f1; }
.panel-content details > div { padding: 16px; background-color: rgba(0,0,0,0.15); }
#wp-mockup-tool-container-v61.light-theme .panel-content details > div { background-color: #f9fafb; }
.panel-content fieldset { border: none; padding: 0; margin: 0 0 16px 0; }
.panel-content legend { font-size: 0.85em; font-weight: 600; padding: 0 0 8px 0; color: var(--text-color); width: 100%; border-bottom: 1px solid rgba(128,128,128,0.3); margin-bottom: 12px; }
.panel-content label, .panel-content .blend-if-layer-label { font-size: 0.8em; color: var(--text-color-muted); margin: 8px 0 4px; display: block; font-weight: 500; }
.panel-content input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--control-bg-color); border-radius: 3px; outline: none; margin: 5px 0 10px 0; }
.panel-content input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: 2px solid var(--panel-bg-color); }
.panel-content input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: 2px solid var(--panel-bg-color); }
.panel-content select { width: 100%; margin-bottom: 10px; box-sizing: border-box; background: var(--control-bg-color); color: var(--text-color); border: 1px solid var(--panel-border-color); padding: 6px; border-radius: 4px; }
.panel-content button { background-color: var(--control-bg-color); color: var(--text-color); border: 1px solid var(--panel-border-color); padding: 8px 12px; border-radius: 5px; font-size: 0.85em; cursor: pointer; transition: all 0.2s; width: 100%; box-sizing: border-box; margin-bottom: 5px; }
.panel-content button:hover:not(:disabled) { border-color: var(--accent-color); }
.panel-content button:disabled { background-color: var(--control-bg-color); color: var(--text-color-muted); cursor: not-allowed; opacity: 0.6;}
.panel-content #undo-point-button-v61 { background-color: var(--warning-color); color: #222; border:none; }
.panel-content #clear-path-button-v61 { background-color: var(--danger-color); border:none; }
.panel-content .control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.panel-content .control-row label { margin: 0; flex-shrink: 0; width: auto; min-width: 50px; }
.panel-content .control-row input[type="range"] { margin-bottom: 0; flex-grow: 1; }
.panel-content .control-row .value-display { font-size: 0.8em; font-weight: bold; color: var(--text-color-muted); min-width: 35px; text-align: right; }
.panel-content .path-buttons { display: flex; gap: 10px; margin-top: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.panel-content .artwork-layers-panel { max-height: 220px; overflow-y: auto; margin-bottom: 15px; border: 1px solid var(--panel-border-color); padding: 5px; background-color: var(--bg-color); border-radius: 4px; }
.panel-content .artwork-layer-item { display: flex; align-items: center; padding: 8px 10px; margin-bottom: 5px; background-color: var(--control-bg-color); border: 1px solid var(--panel-border-color); border-radius: 4px; cursor: pointer; font-size: 0.85em; justify-content: space-between; }
.panel-content .artwork-layer-item:hover { background-color: var(--accent-color); color: #fff; }
.panel-content .artwork-layer-item.active-layer { background-color: var(--accent-color); border-left: 3px solid var(--accent-color-hover); font-weight: bold; color: #fff; }
.panel-content .artwork-layer-item .layer-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px;}
.panel-content .artwork-layer-item .layer-actions button { background: none; border: none; cursor: pointer; padding: 3px; margin-left: 5px; line-height: 1; color: var(--text-color-muted); }
.panel-content .artwork-layer-item:hover .layer-actions button,
.panel-content .artwork-layer-item.active-layer .layer-actions button { color: #fff; }
.panel-content .artwork-layer-item .layer-actions button svg { width: 16px; height: 16px; stroke-width: 2; stroke: currentColor; fill: none; }
.panel-content .layer-list-color-swatch { width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); }
#wp-mockup-tool-container-v61 #magnifier-v61 { position: absolute; display: none; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; pointer-events: none; z-index: 1000; background-color: var(--bg-color); box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
#wp-mockup-tool-container-v61 #magnifier-canvas-v61 { display: block; width: 100%; height: 100%; }

.panel-content button.active-path-tool {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color-hover);
}

.panel-content input[type="color"] {
    padding: 2px;
    border: 1px solid var(--panel-border-color);
    border-radius: 4px;
    background-color: var(--control-bg-color);
    cursor: pointer;
    height: 30px;
}

/* --- CURSOR STYLES --- */
.canvas-container.default-cursor { cursor: default; }
.canvas-container.pan-active { cursor: grab; }
.canvas-container.panning { cursor: grabbing !important; }
.canvas-container.zoom-active { cursor: zoom-in; }
.canvas-container.select-active.allow-drag { cursor: grab; }
.canvas-container.select-active.dragging-artwork { cursor: grabbing !important; }
.canvas-container.select-active.selection-mode-active { cursor: crosshair !important; }
.canvas-container.select-active.edit-active { cursor: move; }
.canvas-container.select-active.edit-possible { cursor: pointer; }
.canvas-container.select-active.mesh-grab { cursor: grab; }
.canvas-container.select-active.mesh-grabbing { cursor: grabbing !important; }
.canvas-container.select-active.add-point-mode { cursor: cell-plus; }
.canvas-container.select-active.remove-point-mode { cursor: cell-minus; }

/* --- NEW STYLE FOR TWO-COLUMN KEY FEATURES LIST --- */
.definition-list-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.definition-list-grid dt {
    font-weight: 600;
    color: var(--accent-color, #0d6efd); /* Use your site's accent color */
    text-align: right;
}

.definition-list-grid dd {
    margin: 0;
}

@media (max-width: 768px) {
    .definition-list-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .definition-list-grid dt {
        text-align: left;
        margin-bottom: 0.25rem;
    }
}