/**
 * BildLicht Lampe Editor CSS 1
 */

:root {
    --vh: 1vh;
}

/* Main container */
.bildlicht-editor-container {
    max-width: 100%;
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    clear: both; /* Ensure it clears any floats */
    display: block; /* Ensure it's a block element */
}

/* Wrapper for product pages */
.bildlicht-editor-wrapper {
    width: 100%;
    clear: both;
    margin: 30px 0;
    display: block;
}

/* Tab content wrapper */
.bildlicht-editor-tab-content {
    width: 100%;
    padding: 20px 0;
    display: block;
}

/* Fix for WooCommerce tabs */
.woocommerce-tabs .panel .bildlicht-editor-container {
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Make sure the tab content is visible */
.woocommerce-Tabs-panel--bildlicht_editor {
    display: block !important;
}

/* Section headings */
.bildlicht-editor-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.bildlicht-editor-container h3 {
    font-size: 18px;
    margin: 15px 0;
    color: #444;
}

/* Upload section */
.bildlicht-editor-upload {
    margin-bottom: 20px;
}

#bildlicht-image-upload {
    display: block;
    margin: 10px 0;
    padding: 10px;
    border: 2px dashed #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

#bildlicht-image-upload:hover {
    border-color: #2271b1;
    background-color: #f0f0f1;
}

/* Custom file input styling */
.bildlicht-file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 10px 0;
}

.bildlicht-file-input-wrapper .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2271b1;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bildlicht-file-input-wrapper .button:hover {
    background-color: #135e96;
}

.bildlicht-file-input-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

/* Canvas container and canvas */
.bildlicht-canvas-container {
    width: 100%;
    max-width: 1200px;
    margin: 5px 0;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    padding: 5px;
}

.bildlicht-canvas-container canvas {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* Height will be set by JavaScript based on aspect ratio */
}

.bildlicht-canvas-instructions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #666;
    text-align: center;
    pointer-events: none;
}

.bildlicht-canvas-container.has-images .bildlicht-canvas-instructions {
    display: none;
}

/* Dimensions indicators */
.bildlicht-dimension {
    position: absolute;
    background-color: rgba(200, 230, 255, 0.7);
    font-weight: bold;
    color: #333;
    text-align: center;
    font-size: 12px;
    z-index: 5;
    display: none; /* Hide dimension indicators */
}

.bildlicht-dimension-width {
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
}

.bildlicht-dimension-height {
    top: 0;
    left: 0;
    bottom: 0;
    width: 20px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Image thumbnails section */
.bildlicht-thumbnails-wrapper {
    margin: 20px 0;
}

.bildlicht-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.bildlicht-thumbnail {
    width: 50px;
    height: 50px;
    border: 2px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.bildlicht-thumbnail:hover {
    border-color: #0073aa;
    transform: scale(1.05);
}

.bildlicht-thumbnail.selected {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.5);
}

.bildlicht-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Submit section */
.bildlicht-editor-submit {
    margin-top: 40px;
}

/* Ensure the cart form stays in normal document flow */
.bildlicht-editor-submit form.cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* Messages */
#bildlicht-messages {
    margin: 10px 0;
    min-height: 30px;
}

#bildlicht-messages:empty {
    margin: 0;
    min-height: 0;
    display: none;
}

.bildlicht-message {
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 4px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bildlicht-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.bildlicht-message.success {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

/* Info message style */
.bildlicht-message.info {
    background-color: #cff4fc;
    border: 1px solid #b6effb;
    color: #055160;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bildlicht-editor-container {
        padding: 10px;
        margin: 10px 0;
    }
    
    .bildlicht-canvas-container {
        height: auto;
        min-height: 0; /* Allow container to shrink to canvas height on mobile */
        margin: 10px 0 0 0; /* Keep controls close with small bottom margin */
        padding: 5px 5px 0 5px; /* Maintain existing padding without extra space */
    }
    
    .bildlicht-thumbnail {
        width: 60px;
        height: 60px;
    }
}

/* Debug information */
.bildlicht-debug {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    font-family: monospace;
    font-size: 12px;
}

/* Canvas dividers */
.bildlicht-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(0, 115, 170, 0.7);
    cursor: col-resize;
    z-index: 10;
}

.bildlicht-divider:hover,
.bildlicht-divider.dragging {
    background-color: rgba(0, 115, 170, 1);
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}


.bildlicht-divider-handle {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #0073aa;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: col-resize;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.bildlicht-divider:hover .bildlicht-divider-handle,
.bildlicht-divider.dragging .bildlicht-divider-handle {
    width: 40px;
    height: 40px;
}

/* Cursor styles for canvas */
.bildlicht-canvas-container.divider-drag {
    cursor: col-resize !important;
}

.bildlicht-canvas-container.image-drag {
    cursor: move !important;
}

/* Image controls */
.bildlicht-image-controls {
    margin: 15px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.bildlicht-image-controls button {
    margin: 0 5px;
    padding: 8px 12px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    vertical-align: middle;
    height: auto;
}

.bildlicht-image-controls button:hover {
    background-color: #f0f0f0;
}

.bildlicht-image-controls button:focus {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.bildlicht-image-controls button .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

/* Hide controls that require images when no images are present */
#bildlicht-canvas-container:not(.has-images) ~ .bildlicht-image-controls.requires-images {
    display: none;
}

/* Always show the upload controls */
.bildlicht-image-controls.bildlicht-always-show {
    display: flex !important;
}

/* Highlight the upload button to make it more prominent */
#bildlicht-upload-images {
    background-color: #0073aa;
    color: white;
    border-color: #006799;
}

#bildlicht-upload-images:hover {
    background-color: #006799;
}

/* Responsive adjustments for controls */
@media (max-width: 768px) {
    .bildlicht-image-controls {
        flex-wrap: wrap;
    }
    
    .bildlicht-image-controls button {
        padding: 6px 10px;
        margin-bottom: 5px;
    }
}

/* Text editor panel */
.bildlicht-text-editor {
    position: absolute;
    width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: none;
    right: 20px;
    top: 20px;
}

.bildlicht-text-editor.active {
    display: block;
}

.bildlicht-text-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.bildlicht-text-editor-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.bildlicht-close-text-editor {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.bildlicht-close-text-editor:hover {
    color: #d63638;
}

.bildlicht-text-editor-body {
    padding: 15px;
}

.bildlicht-form-group {
    margin-bottom: 15px;
}

.bildlicht-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #444;
}

.bildlicht-text-input,
.bildlicht-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.bildlicht-range {
    width: 80%;
    vertical-align: middle;
}

#bildlicht-text-size-value {
    display: inline-block;
    width: 15%;
    text-align: right;
    font-size: 14px;
    color: #666;
}

.bildlicht-color {
    width: 40px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.bildlicht-text-rotation-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#bildlicht-text-rotation-value {
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.bildlicht-form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.bildlicht-form-actions button {
    padding: 8px 15px;
}

/* Responsive adjustments for text editor */
@media (max-width: 768px) {
    .bildlicht-text-editor {
        width: 90%;
        max-width: 300px;
        right: 5%;
        left: 5%;
        margin: 0 auto;
    }
}

/* Save Design button */
#bildlicht-save-design {
    background-color: #2271b1;
    color: white;
    padding: 8px 15px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    float: right;
    margin-top: -5px;
}

#bildlicht-save-design:hover {
    background-color: #135e96;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#bildlicht-save-design:before {
    content: "\f147";
    font-family: dashicons;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 5px;
    line-height: 1;
}

/* Make rearrange button less prominent */
#bildlicht-rearrange-button {
    background-color: #f0f0f1;
    border: 1px solid #c3c4c7;
    color: #2c3338;
}

/* Preview section */
.bildlicht-editor-preview {
    margin: 1px 0;
    display: block;
}

.bildlicht-preview-container {
    width: auto;
    max-width: 600px; /* Reduced from 1200px to be closer to the lampshade width */
    margin: 5px auto;
    padding: 20px;
    min-height: 400px;
    position: relative;
    background-color: #fff; /* Match background color with main container */
    /* Add smooth transitions for orientation changes */
    transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out;
}

#bildlicht-3d-preview {
    height: 70vh; /* Responsive fallback, overridden by JavaScript */
    min-height: 280px; /* Ensure enough space for controls */
    width: 100%;
    position: relative;
    overflow: visible; /* Allow control buttons to extend beyond preview without clipping */
    border-radius: 6px; /* Slightly smaller border radius for inner element */
}

@media (min-width: 769px) {
    #bildlicht-3d-preview {
        height: clamp(360px, 70vh, 800px);
    }
}

.bildlicht-preview-instructions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #666;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

.bildlicht-preview-container.has-preview .bildlicht-preview-instructions {
    display: none;
}

.bildlicht-force-preview-button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #ddd;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.bildlicht-force-preview-button:hover {
    background-color: #ccc;
}

.bildlicht-debug-info {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    font-family: monospace;
    max-height: 200px;
    overflow: auto;
}

#bildlicht-3d-preview canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px; /* Match the parent container border radius */
    filter: grayscale(100%); /* Show preview images in greyscale */
}

/* Preview controls - styling for buttons created by preview.js */
/* CRITICAL: 6 buttons positioned vertically; ensure container height is sufficient.
   
   COMPLETE height calculations (corrected to include ALL elements):
   
   Components per button group:
   - 6 buttons (varying sizes by breakpoint)
   - 6 button borders (1px top + 1px bottom each = 2px per button)
   - 4 regular flex gaps + 1 spacer element (10px with margins/borders)
   - Container padding (top + bottom)
   - Safety margin for subpixel rendering and browser differences
   
   Accurate calculations:
   - Desktop: 6×32px + 6×2px borders + 4×10px gaps + 10px spacer + 20px padding + 50px margin = 352px (400px container ✓)
    - Mobile landscape: 6×40px + 6×2px borders + 4×8px gaps + 10px spacer + 10px padding + 50px margin = 354px (360px container ✓)
   
   #bildlicht-3d-preview previously used overflow:hidden which clipped buttons extending beyond bounds.
   Overflow is now visible to keep controls accessible even on small screens.
   Always ensure container heights exceed calculated button group height with generous safety buffers. */
.bildlicht-preview-controls {
    position: absolute;
    left: calc(100% + 10px); /* Place buttons outside to the right of the preview */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 5px; /* Adjust padding for vertical layout */
    border-radius: 5px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Styling for individual control buttons */
.bildlicht-preview-controls button {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    transition: all 0.2s ease;
    outline: none;
}

/* Dashicons in preview controls */
.bildlicht-preview-controls-button .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Match the color used in design canvas buttons */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    line-height: 1; /* Normalize line height */
    text-align: center; /* Ensure text is centered */
    position: absolute; /* Use absolute positioning for precise centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the icon precisely */
}

/* Make sure the parent button has a position relative for absolute positioning of the icon */
.bildlicht-preview-controls-button.elementor-button.elementor-kit-54 {
    width: 32px;
    height: 32px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    position: relative; /* Required for absolute positioning of child elements */
    overflow: hidden; /* Hide overflow if necessary */
}

.bildlicht-preview-controls button:hover {
    background-color: #f0f0f0;
    border-color: #999;
    transform: scale(1.05);
}

.bildlicht-preview-controls button:active {
    background-color: #e0e0e0;
    transform: scale(0.95);
}

/* Responsive styles for preview */
@media (max-width: 768px) {
    .bildlicht-preview-container {
        padding: 0 10px 10px 10px; /* No top padding */
        max-width: 585px; /* Increased from 450px by 30% */
        margin-top: 1px; /* Small margin to prevent overlap */
        /* Ensure smooth transitions during orientation changes */
        transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, max-width 0.2s ease-out;
    }
    
    .bildlicht-preview-controls {
        padding: 5px 3px;
        gap: 8px;
        left: calc(100% + 5px); /* Position controls outside the preview */
    }

    .bildlicht-preview-controls button,
    .bildlicht-preview-controls-button.elementor-button.elementor-kit-54 {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 50%;
    }
}

/* Loading indicator */
.bildlicht-preview-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.bildlicht-preview-loading-text {
    font-size: 16px;
    font-weight: bold;
}

/* Error message */
.bildlicht-preview-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    padding: 20px;
    text-align: center;
}

.bildlicht-preview-error-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    margin-bottom: 20px;
}

.bildlicht-preview-error button {
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #2271b1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bildlicht-preview-error button:hover {
    background-color: #135e96;
}

/* Canvas controls - the button grid */
.bildlicht-canvas-controls {
    display: flex;
    margin-bottom: 15px;
    justify-content: center;
}

.bildlicht-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

/* Image-specific control group (hidden until an image is selected) */
.bildlicht-selected-image-controls {
    display: none;
    align-items: center;
    gap: 8px;
}

.bildlicht-selected-image-controls:not([hidden]) {
    display: flex;
}

/* Wrapper for image-specific controls displayed below the canvas */
.bildlicht-selected-image-controls-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    min-height: 40px;
}

/* Control buttons styling */
.bildlicht-control-button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Allow expansion for text labels */
    height: 40px; /* Equal height and width for square buttons */
    transition: all 0.2s;
}

.bildlicht-control-button.bildlicht-preview-button {
    display: inline-flex;
    padding: 6px 16px;
    width: auto;
    min-width: auto;
    gap: 8px;
}

.bildlicht-control-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

/* Ensure dashicons are visible and properly sized */
.bildlicht-control-button .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-block !important;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    color: #333;
}

/* Mobile adjustments for buttons */
@media (max-width: 768px) {
    .bildlicht-control-button {
        padding: 4px;
        min-width: 40px;
        height: 40px;
    }
    
    /* Hide label text on upload button – keep only icon */
    .mobile-device #bildlicht-upload-button {
        font-size: 0; /* collapse text */
        padding: 6px; /* square button */
        gap: 0;
    }

    /* Hide label text on upload button – keep only icon */
    .mobile-device #bildlicht-upload-button .dashicons {
        margin: 0;
        font-size: 20px;
    }
    
    .bildlicht-control-button .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
}

/* Active/selected control button */
.bildlicht-control-button.active {
    background-color: #dbeafe;
    border-color: #93c5fd;
}

/* Disabled control button */
.bildlicht-control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.bildlicht-coverage-warning {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    padding: 2px 2px;
    color: #000000;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #6E5A51;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    display: none;
    z-index: 15;
    max-width: calc(100% - 30px);
}

.bildlicht-coverage-warning:not([hidden]) {
    display: block;
}

/* Smartphone specific optimizations */
@media (max-width: 480px) {
    /* Container spacing */
    .bildlicht-editor-container {
        padding: 8px;
        margin: 5px 0;
    }

    /* Smaller canvas for very small screens */
    .bildlicht-canvas-container {
        /*min-height: 200px; outcommented LMZ*/
        padding: 5px 5px 5px 5px; /* Remove bottom padding */
    }
    
    /* Mobile preview height - dynamically adjusted by JavaScript */
    #bildlicht-3d-preview {
        height: 60vh; /* Fallback responsive height */
        min-height: 250px; /* Ensure minimum usable height */
    }
    
    /* Increased preview container width by 30% */
    .bildlicht-preview-container {
        max-width: 455px; /* Increased from 350px by 30% */
        padding: 0 10px 10px 10px; /* No top padding */
        margin-top: 1px; /* Small margin to prevent overlap */
    }
    
    /* Optimize button grid layout for very small screens */
    .bildlicht-canvas-controls {
        gap: 5px;
    }
    
    .bildlicht-control-row {
        gap: 5px;
    }

    .bildlicht-control-button {
        min-width: 40px;
        height: 40px;
    }
    
    /* Preview controls - optimized for very small screens */
    .bildlicht-preview-controls {
        left: calc(100% + 3px);
        padding: 5px 3px; /* Slightly more padding for better visibility */
        gap: 4px; /* Reduced gap to save space */
    }

    .bildlicht-preview-controls button,
    .bildlicht-preview-controls-button.elementor-button.elementor-kit-54 {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 50%;
    }
    
    /* Better thumbnail handling */
    .bildlicht-thumbnail {
        width: 50px;
        height: 50px;
    }
}

@media (orientation: portrait) {
    .bildlicht-canvas-container .bildlicht-coverage-warning {
        width: 100%;
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        max-width: 100%;
        margin: 12px 0 16px;
        box-shadow: none;
        pointer-events: none;
    }
}

@media (orientation: portrait) and (max-width: 480px) {
    .bildlicht-canvas-container .bildlicht-coverage-warning {
        margin-top: 10px;
        margin-bottom: 14px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Touch interaction styles */
.bildlicht-canvas-container.touch-active {
    /* Removed border-color and box-shadow */
}

.mobile-device .bildlicht-control-button {
    /* Increase touch target size on mobile */
    min-width: 30px;
    min-height: 30px;
}

/* Styles for the mobile-optimized canvas */
.bildlicht-canvas-container.mobile-optimized {
    overflow: visible;
    position: relative;
    margin-bottom: 30px;
}

/* Prevent text selection during touch interactions */
.mobile-device .bildlicht-canvas-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Allow scrolling on empty areas of the editor */
    touch-action: auto;
}

/* Ensure direct touch gestures on the canvas don't trigger scrolling */
.mobile-device #bildlicht-canvas {
    /* Default touch behavior so the page can scroll when the canvas is empty */
    touch-action: auto;
}

/* Improve visual feedback for touch interactions */
.mobile-device .bildlicht-control-button:active {
    background-color: #e0e0e0;
    transform: scale(0.95);
}

/* Add specific styles for portrait/landscape orientations */
@media (orientation: portrait) {
    .mobile-device .bildlicht-canvas-container {
        height: auto;
        /*min-height: 200px; outcommented LMZ*/
        margin-bottom: 5px; /* No bottom margin */
    }

    .mobile-device .bildlicht-preview-container {
        height: auto;
        min-height: 360px;
        max-width: 520px;
        margin-top: 1px; /* Small margin to prevent overlap */
        display: flex;
        align-items: center;
    }

    /* 3D preview takes remaining width; controls sit beside it */
    .mobile-device #bildlicht-3d-preview {
        flex: 1 1 auto;
        box-sizing: border-box;
        padding-right: 0; /* No internal padding; width handled by flex */
    }

    /* Position controls outside the canvas area to prevent overlap */
    .mobile-device .bildlicht-preview-controls {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        margin-left: 10px;
    }

    /* Reduce space between canvas and submit area */
    .mobile-device .bildlicht-editor-submit {
        margin-top: 25px;
    }

}

@media (orientation: landscape) {
    .mobile-device .bildlicht-canvas-container {
        height: auto;
        min-height: 150px;
        margin-bottom: 20px; /* Increased space below canvas to prevent preview overlap */
    }
    
    /* Prevent 3D preview from overlapping canvas in landscape mode */
    .mobile-device .bildlicht-preview-container {
        clear: both;
        margin: 20px auto 0; /* Keep container centred and separated from canvas */
        position: relative;
        height: auto;
        min-height: 360px; /* Height matches 3D preview to accommodate all 6 control buttons with generous margins */
        max-width: 520px;
        display: flex;
        align-items: center;
        /* Smooth transitions for orientation changes to prevent jarring layout shifts */
        transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, max-width 0.2s ease-out, min-height 0.2s ease-out;
    }

    /* 3D preview takes remaining width; controls sit beside it */
    .mobile-device #bildlicht-3d-preview {
        flex: 1 1 auto;
        box-sizing: border-box;
        padding-right: 0; /* No internal padding; width handled by flex */
        height: auto; /* Dynamically calculated by JavaScript based on viewport */
        min-height: 280px; /* Minimum for 6 buttons: ~270px calculated + safety margin */
        max-height: 90vh; /* Allow height to scale with viewport */
    }

    /* Position controls outside the canvas area to prevent overlap */
    .mobile-device .bildlicht-preview-controls {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        margin-left: 10px;
    }
    
    /* Ensure proper layout in landscape mode */
    .mobile-device .bildlicht-editor-container {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Added gap for breathing room between sections */
    }
    
    /* Ensure the canvas section takes priority */
    .mobile-device .bildlicht-editor-canvas {
        order: 1;
    }
    
    /* Ensure the preview section is below */
    .mobile-device .bildlicht-editor-preview {
        order: 2;
        margin-top: 20px; /* Increased margin to prevent overlap */
    }
    
    /* Ensure the submit button is displayed after the preview section */
    .mobile-device .bildlicht-editor-submit {
        order: 3;
        margin-top: 25px;
    }

    /* Ensure sufficient space between image controls and submit button */
    .mobile-device .bildlicht-selected-image-controls-wrapper {
        margin-bottom: 40px;
        min-height: 40px;
    }
}

/* Enhanced landscape mode rules for devices with very limited height */
@media (orientation: landscape) and (max-height: 420px) {
    .mobile-device .bildlicht-canvas-container {
        min-height: 120px; /* Further reduced for very small screens */
        margin-bottom: 25px; /* More space to ensure separation */
    }
    
    .mobile-device .bildlicht-preview-container {
        margin-top: 25px; /* More separation for small screens */
        min-height: 360px; /* Height matches 3D preview for very small screens with adequate margins */
        /* Smooth transitions for small screen orientation changes */
        transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, min-height 0.2s ease-out;
    }

    .mobile-device #bildlicht-3d-preview {
        height: auto; /* Dynamically sized for very small screens */
        min-height: 260px; /* Reduced minimum for very constrained viewports */
        max-height: 90vh; /* Scale with viewport height */
    }
    
    /* Reduce padding on container to save space */
    .mobile-device .bildlicht-editor-container {
        padding: 5px;
    }
    
    /* Make controls more compact */
    .mobile-device .bildlicht-control-button {
        min-width: 40px;
        height: 40px;
        margin: 0 3px;
    }

    .mobile-device .bildlicht-control-button .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
}

/* Preview not available message */
.bildlicht-preview-not-available {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #555;
    padding: 20px;
    text-align: center;
    z-index: 20;
}

/* Mobile device rotation animation container */
.bildlicht-rotate-device-indicator {
    position: relative;
    width: 100%;
    max-width: 300px;
    background-color: rgba(149, 133, 125, 0.8);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    padding: 5px 5px;
    margin: 0 auto 10px auto;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    min-height: 50px; /* taller container so rotated phone fits */

}

@media (orientation: portrait) {
    .bildlicht-rotate-device-indicator {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
}

.bildlicht-rotate-device-icon {
    width: 30px;
    height: 15px;
    border: 2px solid white;
    border-radius: 5px;
    position: relative;
    margin-bottom: 30px; /* keep text clear when phone is vertical */
    transform-origin: bottom center; /* rotate around base so it doesn't overlap */
    animation: rotateDeviceAnimation 5s ease-in-out infinite;
}

.bildlicht-rotate-device-text {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    max-width: 250px;
    padding: 4px;
    line-height: 1.3;
}

@keyframes rotateDeviceAnimation {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(90deg);
    }
    70% {
        transform: rotate(90deg);
    }
    80% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Preview controls spacer */
.bildlicht-preview-controls-spacer {
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 4px 0;
    width: 100%;
}

/* Enhanced mobile optimization styles */
@media (max-width: 768px) {
    /* Improve touch target sizes for buttons */
    .bildlicht-control-button {
        min-width: 40px;
        height: 40px;
        margin: 0 2px;
    }
    
    .bildlicht-control-button .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
    
    /* Better row layout */
    .bildlicht-control-row {
        margin-bottom: 5px;
    }
    
    /* Preview container improvements */
    .bildlicht-preview-container {
        padding: 0 10px 10px 10px; /* No top padding */
        max-width: 585px; /* Increased from 450px by 30% */
        margin-top: 1px; /* Small margin to prevent overlap */
    }
    
    #bildlicht-3d-preview {
        height: 70vh; /* Responsive height based on viewport */
        min-height: 280px; /* Ensure control buttons fit */
        max-height: 90vh; /* Prevent excessive height while allowing larger viewports */
    }
    
}

/* Smartphone specific optimizations */
@media (max-width: 480px) {
    /* Increased preview container width by 30% */
    .bildlicht-preview-container {
        max-width: 455px; /* Increased from 350px by 30% */
        padding: 0 10px 10px 10px; /* No top padding */
        margin-top: 1px; /* Small margin to prevent overlap */
        /* Smooth transitions for smartphone orientation changes */
        transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, max-width 0.2s ease-out;
    }
}

@media (orientation: portrait) {
    .mobile-device .bildlicht-preview-container {
        height: auto;
        min-height: 360px;
        max-width: 520px;
        margin-top: 1px; /* Small margin to prevent overlap */
        /* Smooth transitions for portrait orientation */
        transition: margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, max-width 0.2s ease-out, min-height 0.2s ease-out;
    }
}

/* Note: Removed problematic general rule that was overriding media query-specific margins.
   The specific orientation-based rules handle margins properly without a general override. */

/* Hide website headers on mobile devices in landscape orientation */
/* Use max-height instead of max-width to cover wider mobile screens */
@media (orientation: landscape) and (max-height: 500px) {
    body.mobile-device header,
    body.mobile-device .site-header,
    body.mobile-device #masthead,
    body.mobile-device .main-header,
    body.mobile-device #site-header,
    body.mobile-device .header-main,
    body.mobile-device .page-header,
    body.mobile-device .site-branding,
    body.mobile-device #wpadminbar {
        display: none !important;
    }

    body.mobile-device {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* === Mobile landscape: side-by-side canvas (80%) and 3D preview (20%) === */
@media (orientation: landscape) {
    /* Force horizontal layout without gaps */
    .mobile-device .bildlicht-editor-container {
        display: flex !important; /* override theme blocks */
        flex-direction: column;
        flex-wrap: nowrap; /* prevent wrapping that caused button overlap on Android Chrome */
        align-items: stretch; /* allow full-width sections so submit button can center */
        gap: 0;
    }

    /* === New layout: Buttons column (left) + Canvas (right) === */
    .mobile-device .bildlicht-canvas-controls {
        position: static;
        width: auto;
        flex: 0 0 auto; /* auto width for single row */
        margin: 0 8px 0 0; /* space between buttons and canvas */
        display: block; /* allow flex inside */
        order: 1;
    }

    /* Button grid: single row layout like portrait mode */
    .mobile-device .bildlicht-control-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
    }

    /* Design canvas takes 80% of the width */
    .mobile-device .bildlicht-editor-canvas {
        flex: 1 1 0;
        max-width: 100%;
        min-width: 0;
        margin: 0; /* remove previously added vertical spacing */
        order: 2;
    }

    /* Preview occupies the remaining 20% */
    .mobile-device .bildlicht-editor-preview {
        flex: 0 0 100%; /* full row below canvas */
        max-width: 100%;
        margin-top: 1px; /* 1px margin under canvas */
        box-sizing: border-box;
        order: 3;
        display: flex;
        flex-direction: column; /* keep internal vertical flow */
        height: 100%;
    }

    /* Ensure preview container fills its column completely */
    .mobile-device .bildlicht-preview-container {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    /* 3D preview adaptive to available space */
    .mobile-device #bildlicht-3d-preview {
        flex: 1 1 auto;
        min-height: 280px; /* Ensure buttons remain accessible */
    }

    /* Keep preview control buttons on the right edge */
    .mobile-device .bildlicht-preview-controls {
        right: 5px; /* align close to edge */
        left: auto;
    }
}
/* === End mobile landscape override ====================================== */

/* === End mobile landscape layout v2 ===================================== */

/* --- Mobile preview overlay (≤ 819px or coarse pointer devices) --------- */
@media (max-width: 819px), (hover: none) and (pointer: coarse) {
    /* Open preview button */
    #bildlicht-open-preview-mobile {
        display: block;
        margin: 15px auto 0;
    }

    #bildlicht-open-preview-mobile:hover {
        background-color: #e0e0e0;
        border-color: #bbb;
    }

    /* Style 3D Vorschau button when it's in the control row */
    .bildlicht-control-row #bildlicht-open-preview-mobile {
        width: auto;
        height: 40px;
        margin: 0;
        padding: 6px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bildlicht-control-row #bildlicht-open-preview-mobile .bildlicht-button-text {
        display: inline;
    }

    body.preview-overlay-active #bildlicht-open-preview-mobile {
        display: none;
    }

    body.preview-overlay-active {
        overflow: hidden;
        touch-action: none;
    }

    /* Hide preview area until overlay is opened */
    body:not(.preview-overlay-active) .bildlicht-editor-preview {
        display: none;
    }

    /* Overlay styling */
    body.preview-overlay-active .bildlicht-editor-preview {
        display: block;
    }
body.preview-overlay-active .bildlicht-preview-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: calc(var(--vh, 1vh) * 100);
    background: #fff;
    margin: 0;
    padding: 0;
    z-index: 10000;
        overflow: hidden;
    }
    body.preview-overlay-active #bildlicht-3d-preview {
        width: 100%;
        height: 100%;
    }

    /* Close button */
    .bildlicht-close-preview-mobile {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 20px;
        background: #ffffff;
        color: #333;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
        z-index: 10001;
    }
}
/* Hide mobile-only preview buttons on devices with desktop-style input */
@media (min-width: 820px) and (hover: hover) and (pointer: fine) {
    #bildlicht-open-preview-mobile,
    .bildlicht-close-preview-mobile {
        display: none;
    }
}

/* === Mobile landscape viewport optimization =============================== */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    /* Optimized for mobile landscape with limited viewport height */
    body:not(.preview-overlay-active) #bildlicht-3d-preview {
        height: auto !important; /* Override all fixed heights */
        min-height: 250px; /* Compact minimum for tight viewports */
        max-height: 90vh; /* Scale with viewport height */
    }

    body:not(.preview-overlay-active) .bildlicht-preview-container {
        min-height: 250px !important;
        max-height: 90vh !important;
        margin: 5px auto !important; /* Minimal margins */
    }

    /* Ensure controls remain accessible */
    body:not(.preview-overlay-active) .bildlicht-preview-controls {
        gap: 6px; /* Reduced spacing */
        padding: 4px 2px; /* Compact padding */
    }

    body:not(.preview-overlay-active) .bildlicht-preview-controls button {
        width: 36px; /* Slightly smaller buttons */
        height: 36px;
    }
}

/* --- Keep vertical stacking in mobile landscape (<820px) ------------------- */
@media (max-width: 819px) and (orientation: landscape) {
    .mobile-device .bildlicht-editor-main {
        display: flex !important;          /* reset row layout */
        flex-direction: column !important; /* stack vertically */
    }

    /* ensure full-width sections */
    .mobile-device .bildlicht-editor-canvas,
    .mobile-device .bildlicht-editor-preview {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3D Vorschau button stays centred below canvas */
    #bildlicht-open-preview-mobile {
        order: 2;
        margin: 12px 0 0;
        align-self: center;
    }

    /* preview block after the button */
    .mobile-device .bildlicht-editor-preview {
        order: 3;
        margin-top: 8px;
    }

    /* Place control buttons above canvas in mobile landscape */
    .mobile-device .bildlicht-editor-canvas {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
    }

    .mobile-device .bildlicht-canvas-controls {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 0 8px 0 !important;
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
    }

    .mobile-device .bildlicht-canvas-container {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Position coverage warning overlay within the canvas on mobile */
    .mobile-device #bildlicht-coverage-warning {
        left: 8px;
        right: 8px;
        bottom: 8px;
        font-size: 13px;
        max-width: calc(100% - 30px);
    }

    /* Keep image-specific controls below the canvas */
    .mobile-device .bildlicht-selected-image-controls-wrapper {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center;
        margin-top: 4px;
        margin-bottom: 40px; /* ensure space before submit area */
        min-height: 40px;
    }

    /* Center the cart form below the canvas */
    .mobile-device .bildlicht-editor-submit form.cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

.bildlicht-variation-form-container {
    margin-bottom: 24px;
    --select-bg: rgba(149, 133, 125, 0.5);
    --select-border: #95857d;
    --select-text: #1f2933;
    --select-icon: #42526e;
    --select-focus: rgba(145, 133, 125, 0.35);
}

.bildlicht-variation-form-container table.variations,
.bildlicht-variation-form-container table.variations tbody,
.bildlicht-variation-form-container table.variations tr,
.bildlicht-variation-form-container table.variations td {
    display: block;
    width: 100%;
}

.bildlicht-variation-form-container table.variations tr {
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(145, 133, 125, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(149, 133, 125, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bildlicht-variation-form-container table.variations tr:hover {
    border-color: rgba(145, 133, 125, 0.18);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.bildlicht-variation-form-container table.variations tr:last-child {
    margin-bottom: 0;
}

.bildlicht-variation-form-container table.variations td.label {
    padding: 0;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--select-icon);
    opacity: 0.92;
}

.bildlicht-variation-form-container table.variations td.value {
    padding: 0;
    position: relative;
    color: rgba(149, 133, 125, 0.5);
}

.bildlicht-variation-form-container select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--select-border);
    border-radius: 8px;
    background-color: var(--select-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2016%2016' fill='none'%3E%3Cpath d='M4%206l4%204%204-4' stroke='%2342526e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    color: var(--select-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.bildlicht-variation-form-container select:hover {
    border-color: rgba(149, 133, 125, 0.5);
}

.bildlicht-variation-form-container select:focus {
    outline: none;
    border-color: rgba(149, 133, 125, 0.7);
    box-shadow: 0 0 0 3px var(--select-focus);
}

.bildlicht-variation-form-container select:disabled {
    background-color: rgba(149, 133, 125, 0.8);
    color: rgba(149, 133, 125); 
    cursor: not-allowed;
    box-shadow: none;
}

.bildlicht-variation-form-container select::-ms-expand {
    display: none;
}

.bildlicht-variation-form-container .reset_variations {
    display: inline-flex;
    margin-top: 8px;
    font-size: 13px;
    color: #494441;
}

.bildlicht-variation-form-container .reset_variations:hover,
.bildlicht-variation-form-container .reset_variations:focus {
    color: #494441;
}

.bildlicht-variation-form-container form.variations_form {
    width: 100%;
}

.bildlicht-variation-form-container .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.bildlicht-variation-form-container .woocommerce-variation-add-to-cart .quantity {
    display: none !important;
}

@media (max-width: 480px) and (orientation: landscape) {
    .mobile-device .bildlicht-canvas-container {
        margin-bottom: 2px;
    }

    .mobile-device #bildlicht-coverage-warning {
        bottom: 6px;
        left: 6px;
        right: 6px;
    }
}