/* ScanVault Label Designer — Admin Styles */

/* ============================================================
   Layout
   ============================================================ */
.svld-designer-wrap {
    max-width: 1400px;
}

.svld-subtitle {
    color: #666;
    margin-bottom: 16px;
}

.svld-upgrade-banner {
    background: #fff8e1;
    border-left: 4px solid #f0ad4e;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    font-weight: 500;
}

.svld-upgrade-link {
    margin-left: auto;
    background: #f0ad4e;
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.svld-upgrade-link:hover {
    background: #e09a30;
    color: #fff !important;
}

/* Template Toolbar */
.svld-template-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.svld-template-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 250px;
}

.svld-template-selector label {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

.svld-template-selector select {
    flex: 1;
    max-width: 300px;
}

.svld-template-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svld-template-actions .dashicons {
    margin-top: 3px;
}

/* Grid layout: elements | canvas | properties - ALWAYS floating mode for max canvas space */
.svld-designer-grid {
    display: block; /* Override grid to use floating mode */
    position: relative;
}

/* Elements and Properties panels are always floating */
.svld-elements-panel,
.svld-properties-panel {
    position: fixed !important;
    z-index: 9999;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Elements panel — floating left, auto-hide */
.svld-elements-panel {
    left: 10px;
    top: 80px;
    width: 220px;
    transform: translateX(-240px);
    opacity: 0;
}

.svld-elements-panel:hover,
.svld-elements-panel.svld-panel-pinned {
    transform: translateX(0);
    opacity: 1;
}

/* Properties panel — floating right, auto-hide */
.svld-properties-panel {
    right: 10px;
    top: 80px;
    width: 260px;
    transform: translateX(280px);
    opacity: 0;
}

.svld-properties-panel:hover,
.svld-properties-panel.svld-panel-pinned,
.svld-properties-panel.svld-panel-active {
    transform: translateX(0);
    opacity: 1;
}

/* Canvas takes full width */
.svld-canvas-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.svld-canvas-wrapper {
    max-height: calc(100vh - 200px);
    min-height: 400px;
}

.svld-elements-panel  { /* grid-area removed */ }
.svld-properties-panel { /* grid-area removed */ }

/* Responsive: stack only on truly small screens (WordPress mobile breakpoint) */
@media (max-width: 782px) {
    .svld-designer-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "elements" "canvas" "properties";
        gap: 12px;
    }

    /* Add visual section dividers in stacked layout */
    .svld-panel {
        border-top: 3px solid #2271b1;
        margin-bottom: 12px;
    }

    .svld-panel-title {
        background: #f0f6fc;
        padding: 10px 12px;
        margin: -16px -16px 12px -16px;
        border-bottom: 1px solid #c3c4c7;
        border-radius: 6px 6px 0 0;
    }

    .svld-canvas-panel .svld-panel-title {
        background: #f6f7f7;
    }

    .svld-properties-panel .svld-panel-title {
        background: #f0f6fc;
    }

    .svld-elements-panel .svld-panel-title {
        background: #fcf9f0;
    }
}

@media (max-width: 768px) {
    .svld-designer-wrap {
        padding: 0 10px;
    }

    .svld-canvas-wrapper {
        padding: 10px;
        min-height: 200px;
        max-height: 300px;
    }

    .svld-element-list {
        gap: 3px;
    }

    .svld-element-item {
        padding: 5px 8px;
    }
}

/* ============================================================
   Panels
   ============================================================ */
.svld-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 16px 16px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.svld-panel-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 -16px 8px -16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.svld-canvas-size {
    font-size: 11px;
    font-weight: 400;
    color: #888;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

.svld-panel-desc {
    font-size: 12px;
    color: #888;
    margin: 0 0 12px;
}

/* ---- Collapsible panels ---- */
.svld-panel-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
    transition: background .15s, color .15s;
    padding: 0;
}

.svld-panel-collapse:hover {
    background: #e5e5e5;
    color: #333;
}

.svld-panel-collapse .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.svld-panel-collapsed .svld-panel-collapse .dashicons {
    transform: rotate(-90deg);
}

.svld-panel-collapsed .svld-panel-content {
    display: none;
}

.svld-panel-collapsed .svld-panel {
    min-height: auto;
}

/* ============================================================
   FLOATING TOOLBAR MODE — Maximum Canvas Space
   ============================================================ */

/* Toggle button for floating mode */
.svld-toggle-float-mode {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2271b1;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.svld-toggle-float-mode:hover {
    background: #135e96;
    transform: scale(1.05);
}

/* Show toggle on small screens */
@media (max-width: 1200px) {
    .svld-toggle-float-mode {
        display: flex;
    }
}

/* Floating mode is now always active - remove body.svld-floating-mode selector requirement */

/* Elements panel — floating left, auto-hide */
.svld-elements-panel {
    left: 10px;
    top: 80px;
    width: 200px;
    transform: translateX(-220px);
    opacity: 0;
}

.svld-elements-panel:hover,
.svld-elements-panel.svld-panel-pinned {
    transform: translateX(0);
    opacity: 1;
}

/* Properties panel — floating right, auto-hide */
.svld-properties-panel {
    right: 10px;
    top: 80px;
    width: 240px;
    transform: translateX(260px);
    opacity: 0;
}

.svld-properties-panel:hover,
.svld-properties-panel.svld-panel-pinned,
.svld-properties-panel.svld-panel-active {
    transform: translateX(0);
    opacity: 1;
}

/* Canvas takes full width - already set above */

/* Panel trigger tabs on edges - always visible now */
.svld-panel-trigger {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 80px;
    background: #2271b1;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
}

.svld-panel-trigger-left {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.svld-panel-trigger-right {
    right: 0;
    border-radius: 4px 0 0 4px;
}

.svld-panel-trigger:hover {
    background: #135e96;
    width: 28px;
}

/* Compact element buttons in floating mode */
body.svld-floating-mode .svld-element-item {
    padding: 8px 10px;
}

.svld-layers-section {
    max-height: 150px;
    overflow-y: auto;
}

/* Pin button for panels */
.svld-panel-pin {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666; /* Grey when unpinned */
}

.svld-panel-pin:hover {
    opacity: 1;
    color: #2271b1; /* Blue on hover */
}

.svld-panel-pin.pinned {
    opacity: 1;
    color: #2271b1; /* Blue when pinned */
}

.svld-panel-pin.pinned {
    color: #2271b1;
}

/* Quick property tooltip on element click */
.svld-quick-props {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 10001;
    min-width: 200px;
    max-width: 280px;
    display: none;
}

.svld-quick-props.active {
    display: block;
}

.svld-quick-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.svld-quick-props-title {
    font-weight: 600;
    font-size: 13px;
}

.svld-quick-props-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666;
}

.svld-quick-props-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svld-quick-prop-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svld-quick-prop-row label {
    font-size: 11px;
    color: #666;
    min-width: 50px;
}

.svld-quick-prop-row input,
.svld-quick-prop-row select {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.svld-quick-props-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.svld-quick-props-actions button {
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Very small screens — full overlay panels */
@media (max-width: 782px) {
    .svld-elements-panel,
    .svld-properties-panel {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px);
    }

    .svld-properties-panel {
        top: auto;
        bottom: 70px;
        max-height: 50vh;
    }
}

/* ============================================================
   COMPACT HEADER — Save vertical space
   ============================================================ */

/* New compact header */
.svld-compact-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.svld-template-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.svld-template-section label {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.svld-template-section select {
    min-width: 180px;
    max-width: 250px;
}

.svld-size-section {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.svld-size-section select {
    width: 90px;
    padding: 4px 6px;
    font-size: 12px;
}

.svld-size-section input[type="number"] {
    width: 55px;
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
}

.svld-size-x {
    color: #666;
    font-size: 12px;
}

.svld-unit-label {
    font-size: 11px;
    color: #666;
    margin-right: 4px;
}

.svld-template-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.svld-template-actions .button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
}

.svld-template-actions .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Canvas toolbar - make more compact */
.svld-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.svld-zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.svld-zoom-controls button {
    padding: 4px 8px;
    min-width: 28px;
}

.svld-zoom-level {
    font-size: 12px;
    min-width: 45px;
    text-align: center;
}

.svld-zoom-level-inline {
    font-size: 11px;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    padding: 0 4px;
}

.svld-toolbar-separator {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
}

.svld-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.svld-toolbar-group button {
    padding: 4px 6px;
}

.svld-toolbar-hint {
    font-size: 11px;
    color: #888;
    margin-left: auto;
}

/* Responsive: Stack on small screens */
@media (max-width: 1200px) {
    .svld-compact-header {
        padding: 8px 12px;
        gap: 10px;
    }

    .svld-size-section {
        padding: 0 8px;
    }

    .svld-toolbar-hint {
        display: none;
    }
}

@media (max-width: 900px) {
    .svld-compact-header {
        flex-direction: column;
        align-items: stretch;
    }

    .svld-template-section,
    .svld-size-section,
    .svld-template-actions {
        width: 100%;
        justify-content: space-between;
        border: none;
        padding: 4px 0;
    }

    .svld-size-section {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 8px 0;
    }
}

/* Hide old template toolbar if compact header is used */
.svld-compact-header ~ .svld-template-toolbar {
    display: none !important;
}

/* Hide old preset section if compact header is used */
.svld-compact-header ~ .svld-canvas-panel .svld-preset-section {
    display: none !important;
}

/* Label Preview title - hide to save space when using compact header */
.svld-compact-header ~ .svld-canvas-panel > .svld-panel-title {
    display: none;
}

/* ============================================================
   Elements Panel
   ============================================================ */
.svld-element-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.svld-element-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}

/* Drag handle for draggable elements */
.svld-drag-handle {
    flex-shrink: 0;
    width: 20px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: grab;
    border-radius: 3px;
    transition: background .15s, color .15s;
}

.svld-drag-handle:hover {
    background: #e5e5e5;
    color: #555;
}

.svld-drag-handle:active {
    cursor: grabbing;
}

.svld-drag-handle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.svld-draggable-element {
    cursor: default;
}

.svld-draggable-element .svld-drag-handle {
    opacity: 0.5;
}

.svld-draggable-element:hover .svld-drag-handle {
    opacity: 1;
}

/* Dragging state */
.svld-draggable-element.svld-dragging {
    opacity: 0.5;
    background: #e8f4fd;
}

/* Canvas drag-over state */
.svld-canvas.svld-drag-over {
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.3);
}

.svld-element-item:hover {
    background: #f5f7fa;
    border-color: #bbb;
}

.svld-element-item.svld-element-active {
    background: #e8f4fd;
    border-color: #2271b1;
}

.svld-element-item.svld-element-locked {
    opacity: .55;
    cursor: not-allowed;
}

.svld-add-element-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: #2271b1;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.svld-add-element-btn:hover {
    background: #135e96;
}

.svld-element-item:hover .svld-add-element-btn {
    background: #135e96;
}

.svld-add-element-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.svld-element-label {
    flex: 1;
    font-size: 13px;
}

.svld-element-toggle {
    font-size: 16px;
    color: #aaa;
    cursor: pointer;
}

.svld-element-toggle.visible {
    color: #2271b1;
}

.svld-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================================
   Canvas
   ============================================================ */
.svld-canvas-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent panel from growing */
    position: relative; /* Anchor for resize handle absolute positioning */
}

/* Ruler + Canvas grid — rulers sit outside the scrollable area so they never scroll */
.svld-ruler-layout {
    display: grid;
    grid-template-columns: 25px 1fr;
    grid-template-rows: 25px 1fr;
    flex: 1;
    min-height: 360px;
    max-height: calc(100vh - 380px);
    overflow: hidden;
}

.svld-ruler-corner {
    grid-column: 1;
    grid-row: 1;
    background: #f0f0f0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 101;
}

.svld-canvas-wrapper {
    grid-column: 2;
    grid-row: 2;
    overflow: auto;
    background: #e0e0e0;
    border-radius: 0 0 4px 0;
    flex-shrink: 0;
    position: relative; /* for rubber-band absolute positioning */
}

/* Custom canvas resize handle — positioned by JS at bottom-right corner of wrapper */
.svld-canvas-resize-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 40%, #aaa 40%, #aaa 55%, transparent 55%, transparent 65%, #aaa 65%, #aaa 80%, transparent 80%);
    z-index: 300;
    border-radius: 0 0 4px 0;
}

.svld-canvas {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    border: 1px solid #ccc;
    overflow: visible; /* Allow resize handles to show outside canvas edge */
    margin: 15px; /* Spacing inside scrollable wrapper — rulers are now in their own grid cells */
    cursor: default;
    flex-shrink: 0;
    /* Zoom transform is applied dynamically - removed will-change to prevent compositing issues */
    transform-origin: top left;
    /* Ensure sub-pixel rendering is handled correctly */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Rulers — sit in grid cells, outside the scrollable wrapper */
.svld-ruler {
    background: #f0f0f0;
    border: 1px solid #ddd;
    z-index: 100;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.svld-ruler-h {
    grid-column: 2;
    grid-row: 1;
    height: 25px;
    border-bottom: 1px solid #ccc;
    /* Width is set automatically by the grid column */
}

.svld-ruler-v {
    grid-column: 1;
    grid-row: 2;
    width: 25px;
    border-right: 1px solid #ccc;
    /* Height is set automatically by the grid row */
}

.svld-ruler-marks {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Ruler marks will be drawn by JavaScript */
.svld-ruler-mark {
    position: absolute;
    background: #999;
}

.svld-ruler-mark.major {
    background: #666;
}

.svld-ruler-mark.medium {
    background: #888;
}

.svld-ruler-label {
    position: absolute;
    font-size: 10px;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
    padding: 1px 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

.svld-canvas-locked {
    pointer-events: none;
}

.svld-canvas-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
    gap: 8px;
    padding: 20px;
    text-align: center;
    pointer-events: none;
}

.svld-canvas-placeholder .dashicons {
    font-size: 42px;
    width: 42px;
    height: 42px;
    color: #aaa;
    margin-bottom: 8px;
}

.svld-canvas-placeholder h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
}

.svld-canvas-placeholder p {
    margin: 0;
    line-height: 1.5;
}

.svld-placeholder-actions {
    background: #f0f6fc;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 4px;
}

.svld-placeholder-preset {
    background: #fcf9f0;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Context menu hint - made smaller and less intrusive */
.svld-context-hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(246, 247, 247, 0.95);
    border: 1px solid #c3c4c7;
    border-radius: 20px;
    font-size: 11px;
    color: #646970;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 300px;
}

.svld-context-hint .dashicons {
    color: #2271b1;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Quick Actions Toolbar */
.svld-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.svld-quick-actions-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.svld-action-btn {
    padding: 4px 8px !important;
    height: 28px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.svld-action-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.svld-action-separator {
    width: 1px;
    height: 20px;
    background: #ddd;
    margin: 0 4px;
}

.svld-canvas-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Preset Section - Prominent */
.svld-preset-section {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.svld-preset-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.svld-preset-header label {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
    gap: 4px;
}

.svld-preset-header .dashicons {
    color: #2271b1;
    font-size: 16px;
}

.svld-preset-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.svld-preset-select {
    flex: 1;
    min-width: 200px;
    font-size: 14px;
    padding: 6px 8px;
}

.svld-custom-size {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.svld-size-divider {
    color: #c3c4c7;
    font-weight: 400;
    margin: 0 8px;
}

.svld-size-separator {
    color: #646970;
    font-weight: 400;
}

.svld-apply-btn {
    padding: 4px 12px;
    font-size: 13px;
}

.svld-preview-title {
    margin-bottom: 8px;
}

/* Label Size Controls */
.svld-label-size-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f6f7f7;
    border-radius: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.svld-size-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.svld-size-input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
}

.svld-size-input-group input {
    width: 60px;
}

.svld-save-status {
    font-size: 12px;
    color: #46b450;
    font-weight: 500;
}

.svld-save-status.error {
    color: #dc3232;
}

/* Zoom Controls */
.svld-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f6f7f7;
    border-radius: 4px;
    margin-bottom: 12px;
}

.svld-zoom-controls button {
    padding: 4px 8px;
    line-height: 1;
    min-width: 30px;
    height: 30px;
}

.svld-zoom-controls .dashicons {
    font-size: 16px;
}

.svld-zoom-level {
    font-size: 13px;
    font-weight: 500;
    min-width: 50px;
    text-align: center;
    color: #1d2327;
}

.svld-zoom-hint {
    font-size: 11px;
    color: #787c82;
    margin-left: 4px;
    flex-shrink: 1;
}

.svld-zoom-separator {
    width: 1px;
    height: 20px;
    background: #ddd;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Active toolbar toggle buttons */
.svld-toolbar-btn.active {
    background: #2271b1 !important;
    color: #fff !important;
    border-color: #2271b1 !important;
}
.svld-toolbar-btn.active .dashicons { color: #fff; }

/* ---- History controls (Undo/Redo) ---- */
.svld-history-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.svld-history-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.svld-history-controls button:disabled .dashicons {
    color: #787c82;
}

/* ---- Scale host: sizes to scaled canvas so wrapper scrolls correctly ---- */
#svld-canvas-scale-host {
    position: relative;
    display: inline-block; /* shrinks to content by default; JS sets explicit w/h */
    padding: 0;
    box-sizing: content-box;
}

/* ---- Grid overlay (SVG injected by JS) ---- */
.svld-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
@media print { .svld-grid-overlay { display: none !important; } }

/* ---- Alignment guides ---- */
.svld-guides-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    overflow: visible;
}
.svld-guide {
    position: absolute;
    pointer-events: none;
}
.svld-guide-h {
    left: -9999px; right: -9999px;
    height: 0;
    border-top: 1px dashed #e03030;
}
.svld-guide-v {
    top: -9999px; bottom: -9999px;
    width: 0;
    border-left: 1px dashed #e03030;
}
@media print { .svld-guides-container { display: none !important; } }

/* ---- Rubber-band multi-select ---- */
.svld-rubber-band {
    position: absolute;
    border: 1px dashed #2271b1;
    background: rgba(34,113,177,.08);
    pointer-events: none;
    z-index: 9995;
}

/* ---- Drag / resize position tooltip ---- */
.svld-drag-tooltip {
    position: fixed;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 11px;
    font-family: monospace;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
}
@media print { .svld-drag-tooltip { display: none !important; } }

/* ---- Multi-selected elements ---- */
.svld-el.svld-multi-selected {
    outline: 2px dashed #2271b1;
    outline-offset: 1px;
}

/* ---- Snap indicator (element border turns green when snap is active) ---- */
.svld-el.svld-snapping { outline: 2px solid #1d8348 !important; outline-offset: 1px; }
.svld-canvas.svld-snap-enabled { background-image: radial-gradient(circle, #ddd 1px, transparent 1px); background-size: 1.89px 1.89px; }

/* ---- Show Bounds mode ---- */
.svld-canvas.svld-show-bounds .svld-el[data-type="text"],
.svld-canvas.svld-show-bounds .svld-el[data-type="title"],
.svld-canvas.svld-show-bounds .svld-el[data-type="sku"],
.svld-canvas.svld-show-bounds .svld-el[data-type="price"],
.svld-canvas.svld-show-bounds .svld-el[data-type="website"] { border: 1px dashed #c0392b; }
.svld-canvas.svld-show-bounds .svld-el[data-type="barcode"] { border: 1px dashed #1a7a32; }
.svld-canvas.svld-show-bounds .svld-el[data-type="qr"]      { border: 1px dashed #7d3c98; }
.svld-canvas.svld-show-bounds .svld-el[data-type="image"]   { border: 1px dashed #d35400; }
@media print { .svld-canvas.svld-show-bounds .svld-el { border: none !important; outline: none !important; } }

/* ---- Space+drag / middle-mouse pan cursor ---- */
.svld-canvas-wrapper.svld-panning         { cursor: grab   !important; }
.svld-canvas-wrapper.svld-panning *       { cursor: grab   !important; }
.svld-canvas-wrapper.svld-panning-active  { cursor: grabbing !important; }
.svld-canvas-wrapper.svld-panning-active * { cursor: grabbing !important; }

/* ---- Drag cursor feedback ---- */
body.svld-is-dragging,
body.svld-is-dragging * { cursor: move !important; }

/* ---- Prevent event interception during drag ---- */
body.svld-is-dragging .svld-el:not(.svld-dragging-active):not(.svld-multi-selected) {
    pointer-events: none;
}

.svld-el.svld-dragging-active {
    opacity: 0.95 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    cursor: grabbing !important;
    z-index: 99999 !important;
}

/* ============================================================
   Canvas Elements (rendered by JS)
   ============================================================ */
.svld-el {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed transparent;
    cursor: move;
    transition: border-color .1s;
    /* Optimize for zoom */
    transform-origin: top left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.svld-el:hover {
    border-color: #2271b1;
}

.svld-el.svld-selected {
    border-color: #2271b1;
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(34,113,177,.25);
    z-index: 9999 !important; /* Always on top when selected */
}

.svld-el-resize {
    position: absolute;
    bottom: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #2271b1;
    border-radius: 50%;
    cursor: se-resize;
    z-index: 10000; /* Always above everything, never hidden */
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    display: none; /* Only show when element is selected */
}

.svld-selected .svld-el-resize {
    display: block;
}

/* RTL text support */
.svld-el-text[dir="rtl"] {
    font-family: 'Arial', 'Tahoma', sans-serif;
}

.svld-el-text[dir="rtl"] .svld-el-resize {
    left: -4px;
    right: auto;
    cursor: sw-resize;
}

.svld-el-text {
    display: flex;
    align-items: center;
    overflow: visible; /* Changed from hidden to show resize handle */
    white-space: nowrap;
    font-family: Arial, sans-serif;
    padding: 0;
    /* NO position: relative - elements are already absolutely positioned by .svld-el */
    position: absolute; /* Inherit from .svld-el, don't add relative */
}

/* Invoice table elements need multi-line display and monospace font for proper alignment */
.svld-el-text[data-source="order_invoice_full"],
.svld-el-text[data-source="order_items_table"] {
    white-space: pre;
    align-items: flex-start;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0;
    font-variant-ligatures: none;
}

.svld-el-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.svld-el-barcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow resize handle to show */
}

.svld-barcode-bars {
    display: flex;
    height: 75%;
    width: 100%;
    align-items: stretch;
}

.svld-barcode-bars span {
    flex: 1;
}

.svld-barcode-text {
    font-size: 7px;
    letter-spacing: 2px;
    font-family: monospace;
    text-align: center;
    width: 100%;
    margin-top: 2px;
    color: #000;
}

.svld-el-qr {
    display: grid;
    padding: 4px;
    background: #fff;
    overflow: visible; /* Allow resize handle to show */
}

.svld-qr-cell {
    /* colored by JS */
}

.svld-el-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.svld-el-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow resize handle to show */
}

.svld-el-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================================
   Properties Panel
   ============================================================ */
.svld-no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    color: #666;
    text-align: center;
    gap: 16px;
}

.svld-empty-icon {
    width: 48px;
    height: 48px;
    background: #f0f6fc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svld-empty-icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #2271b1;
}

.svld-no-selection h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.svld-no-selection > p {
    margin: 0;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

/* Quick Tips Section */
.svld-quick-tips {
    width: 100%;
    text-align: left;
    background: #fcf9f0;
    border: 1px solid #f0e6c8;
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
}

.svld-quick-tips h4 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7d4d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.svld-quick-tips ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}

.svld-quick-tips li {
    font-size: 11px;
    color: #666;
    margin: 3px 0;
    line-height: 1.4;
}

/* Keyboard Shortcuts Section */
.svld-keyboard-shortcuts {
    width: 100%;
    text-align: left;
    background: #f0f6fc;
    border: 1px solid #dce9f5;
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
}

.svld-keyboard-shortcuts h4 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #2271b1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.svld-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svld-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.svld-shortcut-key {
    font-family: monospace;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 10px;
    color: #555;
    box-shadow: 0 1px 0 #c3c4c7;
}

.svld-shortcut span:last-child {
    color: #666;
}

.svld-properties-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px; /* Ensure bottom content is fully visible when scrolling */
}

.svld-prop-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 13px;
}

.svld-prop-group > label:first-child {
    flex: 1;
    color: #555;
}

.svld-prop-group input[type="number"] {
    flex: 0 0 auto;
    max-width: 90px;
}

/* Datasource select needs more room for long option labels */
.svld-prop-group select {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Full-width inputs (custom text, image URL) */
.svld-properties-form .regular-text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Description hint below toggle row */
.svld-prop-group .description {
    flex: 0 0 100%;
    font-size: 11px;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

.svld-prop-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 4px 0;
}

/* Text style and alignment button groups */
.svld-text-style-buttons,
.svld-align-buttons {
    display: flex;
    gap: 4px;
}

.svld-style-btn {
    flex: 1;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.svld-style-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.svld-style-btn.active {
    background: #2271b1;
    border-color: #135e96;
    color: #fff;
}

.svld-style-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.svld-prop-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* Properties panel hint */
.svld-prop-hint {
    font-size: 11px;
    color: #999;
    margin: 6px 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* Validation hints for barcode/QR */
.svld-validation-hint {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    background: #fffbe3;
    border-left: 3px solid #f0ad4e;
    border-radius: 3px;
    font-size: 11px;
    color: #8a6d3b;
    line-height: 1.4;
}

.svld-validation-hint::before {
    content: 'ℹ️ ';
    margin-right: 4px;
}

/* Data Source Preview Panel */
.svld-data-source-preview {
    margin-bottom: 12px;
}

.svld-data-source-preview > label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: block;
}

.svld-preview-box {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    min-height: 60px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
    color: #555;
}

.svld-preview-content {
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}

.svld-preview-placeholder {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 15px 0;
}

.svld-preview-info {
    font-size: 10px;
    color: #888;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

.svld-preview-row {
    display: flex;
    justify-content: space-between;
    line-height: 1.6;
}

.svld-preview-value {
    font-size: 12px;
    color: #333;
}

.svld-preview-text {
    padding: 4px 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.svld-preview-barcode {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: -1px;
    padding: 4px 6px;
    background: #f5f5f5;
    border-radius: 3px;
}

.svld-preview-qr-small {
    display: inline-grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    width: 20px;
    height: 20px;
}

.svld-preview-qr-small > div {
    background: #000;
    width: 100%;
    height: 100%;
}

.svld-preview-qr-small > div:nth-child(odd) {
    background: #fff;
}

/* ============================================================
   Right-click Context Menu
   ============================================================ */
.svld-ctx-menu {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    padding: 4px 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    user-select: none;
}

.svld-ctx-header {
    padding: 6px 14px 5px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.svld-ctx-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 3px 0;
}

.svld-ctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    font-size: 13px;
    color: #1d2327;
    cursor: pointer;
    transition: background .1s;
}

.svld-ctx-item span {
    width: 16px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    color: #555;
}

.svld-ctx-item:hover {
    background: #f0f6fc;
    color: #2271b1;
}

.svld-ctx-item:hover span { color: #2271b1; }

.svld-ctx-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.svld-ctx-danger { color: #b91c1c; }
.svld-ctx-danger span { color: #b91c1c; }
.svld-ctx-danger:hover { background: #fdecea; color: #b91c1c; }

/* ============================================================
   Layers List Panel (left sidebar)
   ============================================================ */
.svld-layers-section {
    margin-top: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.svld-layers-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.svld-layers-hint {
    font-size: 10px;
    font-weight: 400;
    color: #aaa;
    background: #f5f5f5;
    padding: 1px 6px;
    border-radius: 8px;
}

.svld-layer-arrow {
    color: #888;
    font-size: 12px;
    margin: 0 2px;
}

.svld-layers-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.svld-layers-empty {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

.svld-layer-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .1s, border-color .1s;
    font-size: 11px;
    color: #444;
}

.svld-layer-item:hover {
    background: #f5f7fa;
    border-color: #ddd;
}

.svld-layer-selected {
    background: #e8f4fd;
    border-color: #2271b1;
    color: #2271b1;
}

.svld-layer-hidden {
    opacity: .45;
}

/* Layer item header */
.svld-layer-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.svld-layer-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.svld-layer-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 11px;
}

/* Layer item info section */
.svld-layer-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 20px;
}

.svld-layer-detail {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

/* Layer item actions */
.svld-layer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    margin-top: 2px;
}

.svld-layer-toggle-vis {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #888;
    transition: color .15s;
    display: flex;
    align-items: center;
}

.svld-layer-toggle-vis:hover {
    color: #2271b1;
}

.svld-layer-toggle-vis .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.svld-layer-zindex {
    font-size: 9px;
    color: #aaa;
    background: #f5f5f5;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.svld-btn-danger {
    color: #dc3232 !important;
    border-color: #dc3232 !important;
}

.svld-btn-danger:hover {
    background: #dc3232 !important;
    color: #fff !important;
}

/* Toggle switch */
.svld-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

.svld-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.svld-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s;
}

.svld-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}

.svld-toggle input:checked + .svld-toggle-slider {
    background: #2271b1;
}

.svld-toggle input:checked + .svld-toggle-slider::before {
    transform: translateX(18px);
}

/* Data source prop-group: label on its own row, select below */
.svld-datasource-props {
    flex-direction: column;
    align-items: stretch;
}

.svld-datasource-props > label:first-child {
    flex: none;
    font-weight: 600;
}

/* Image URL prop-group: stack vertically */
.svld-image-props {
    flex-direction: column;
    align-items: stretch;
}

.svld-image-props > label:first-child {
    flex: none;
    font-weight: 600;
}

/* ============================================================
   Modal (Save Template / Preset Chooser)
   ============================================================ */
.svld-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svld-modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px 28px;
    width: 440px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}

.svld-modal-wide {
    width: 580px;
}

.svld-modal-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
}

.svld-modal-subtitle {
    margin: 0 0 16px;
    color: #777;
    font-size: 13px;
}

.svld-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.svld-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svld-modal-field label {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.svld-modal-field input,
.svld-modal-field select {
    width: 100%;
    box-sizing: border-box;
}

.svld-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* ============================================================
   Preset Cards
   ============================================================ */
.svld-preset-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.svld-preset-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.svld-preset-card:hover {
    background: #f0f6fc;
    border-color: #2271b1;
}

.svld-preset-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.svld-preset-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.svld-preset-info strong {
    font-size: 14px;
    color: #1d2327;
}

.svld-preset-info span {
    font-size: 12px;
    color: #777;
}

/* ============================================================
   Label Type Badges
   ============================================================ */
.svld-type-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 500;
    vertical-align: middle;
}

.svld-type-product  { background: #e8f4fd; color: #2271b1; }
.svld-type-shipping { background: #e6f4ea; color: #1a7c3b; }
.svld-type-invoice  { background: #fef9e7; color: #8a6d00; }
.svld-type-return   { background: #fdecea; color: #b91c1c; }

/* ============================================================
   Paper size preset select
   ============================================================ */
.svld-size-input-group select {
    max-width: 200px;
}

/* ============================================================
   Settings Page
   ============================================================ */
.svld-settings-wrap .form-table th {
    width: 220px;
}

.svld-pro-lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 13px;
}

.svld-pro-lock a {
    font-weight: 600;
}

/* ============================================================
   Metabox
   ============================================================ */
.svld-product-metabox,
.svld-order-metabox {
    font-size: 13px;
}

.svld-metabox-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.svld-print-status {
    min-height: 18px;
}

/* ============================================================
   Product list column
   ============================================================ */
.column-svld_print {
    width: 40px;
    text-align: center !important;
}

.svld-quick-print .dashicons {
    margin-top: 3px;
}

/* Bulk notice */
.svld-bulk-notice {
    display: flex;
    align-items: center;
}

.svld-bulk-notice p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svld-spin {
    animation: svld-rotate 1s linear infinite;
}
@keyframes svld-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   Pro Feature Visual State
   ============================================================ */
.svld-element-item.svld-pro-locked,
.svld-add-element-btn.svld-pro-locked {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.svld-element-item.svld-pro-locked::after,
.svld-add-element-btn.svld-pro-locked::after {
    content: "🔒";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
}

.svld-element-item.svld-pro-locked:hover,
.svld-add-element-btn.svld-pro-locked:hover {
    background: rgba(201, 169, 97, 0.08);
    border-color: rgba(201, 169, 97, 0.3);
}

/* Pro lock icon in element items */
.svld-pro-lock-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
}

/* Pro tooltip */
.svld-pro-tooltip {
    position: absolute;
    z-index: 10000;
    background: #0A1628;
    color: white;
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 320px;
    border: 1px solid rgba(201, 169, 97, 0.3);
    animation: svldFadeIn 0.2s ease;
}

.svld-pro-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #0A1628;
    transform: rotate(45deg);
    border-left: 1px solid rgba(201, 169, 97, 0.3);
    border-top: 1px solid rgba(201, 169, 97, 0.3);
}

.svld-pro-icon {
    font-size: 24px;
}

.svld-pro-text strong {
    display: block;
    font-size: 13px;
    color: #C9A961;
    margin-bottom: 4px;
}

.svld-pro-text p {
    margin: 0;
    font-size: 12px;
    color: #CBD5E1;
    line-height: 1.4;
}

.svld-pro-btn {
    display: inline-block;
    padding: 8px 14px;
    background: #C9A961;
    color: #0A1628 !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}

.svld-pro-btn:hover {
    background: #D4B770;
    transform: translateY(-1px);
}

@keyframes svldFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Settings page Pro badges */
.svld-pro-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #C9A961;
    color: #0A1628;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
    margin-left: 8px;
}

/* Disabled select/input for free users */
.svld-pro-disabled select,
.svld-pro-disabled input,
.svld-pro-disabled textarea {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Context menu items that are pro-locked */
.svld-ctx-item.svld-ctx-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   Order List Print Column
   ============================================================ */
.column-svld_print_order {
    width: 60px;
    text-align: center;
}

.column-svld_print_order .svld-quick-print-order {
    padding: 4px 8px;
    line-height: 1;
}

.column-svld_print_order .svld-quick-print-order .dashicons {
    margin: 0;
}

/* Spinner animation for print buttons */
.svld-spin {
    animation: svld-spin 1s linear infinite;
}

@keyframes svld-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   Product List Print Column
   ============================================================ */
.column-svld_print {
    width: 80px;
    text-align: center;
}

.column-svld_print .svld-quick-print {
    padding: 4px 8px;
    line-height: 1;
}

.column-svld_print .svld-quick-print .dashicons {
    margin: 0;
}
/* Disabled panel state */
.svld-panel-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    filter: grayscale(100%);
}
/* Element type already exists on canvas */
.svld-element-type-exists {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

.svld-element-type-exists .svld-add-element-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
