/* Lamp Configurator Frontend Styles */

.lamp-configurator-wrap {
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Preview Section */
.lamp-preview {
    margin-bottom: 20px;
}

.lamp-image-container {
    position: relative;
    width: 300px;
    height: 400px;
    margin: 0 auto;
}

/* Hver lampe-del er sin egen container */
.lamp-part {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block !important;
    visibility: visible !important;
}

/* Farvelag med PNG som maske */
.lamp-part .lamp-color-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* PNG bruges som maske - kun hvor PNG har pixels vises farven */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    z-index: 1;
    display: block !important;
    visibility: visible !important;
}

/* PNG image skjules - bruges kun til at sætte mask */
.lamp-part .lamp-part-image {
    display: none;
}

/* Komplet overlay PNG - ligger over HELE lampen med skygger/detaljer */
.lamp-complete-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 11; /* Lavere end før - så color layers kan ses */
}

/* Color Options */
.lamp-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Part Selector */
.lamp-part-selector {
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.lamp-part-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.part-buttons {
    display: flex;
    gap: 10px;
}

.part-button {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid #ddd;
    background: #f9f9f9;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    transition: all 0.2s ease;
}

.part-button:hover {
    border-color: #999;
    background: #fff;
}

.part-button.active {
    border-color: #333;
    background: #333;
    color: #fff;
}

/* Color Palette */
.lamp-color-palette {
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.lamp-color-palette label {
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
}

.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-option {
    width: 36px;
    height: 36px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.color-option.active {
    border-color: #333;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}

.color-option:focus {
    outline: none;
}

/* Cart display */
.woocommerce-cart .product-name dl.variation dt,
.woocommerce-checkout .product-name dl.variation dt {
    font-weight: 600;
    margin-right: 5px;
}

.woocommerce-cart .product-name dl.variation dd,
.woocommerce-checkout .product-name dl.variation dd {
    margin: 0 0 5px 0;
}

/* ============================================
   COLOR RING MODE - Customer Design
   ============================================ */

/* Gallery replacement styling */
.lamp-gallery-replacement {
    width: 100%;
    position: relative;
}

/* Skjul standard WooCommerce gallery */
.woocommerce div.product div.images.woocommerce-product-gallery {
    display: none;
}


/* Skjul WooCommerce tabs */
.woocommerce-page div.product .woocommerce-tabs {
    display: none;
}

.lamp-ring-mode {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* Del-vælger top */
.lamp-part-selector-top {
    text-align: center;
    margin-bottom: 30px;
}

.lamp-part-selector-top label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}

.part-buttons-horizontal {
    display: inline-flex;
    gap: 15px;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.part-buttons-horizontal .part-button {
    padding: 12px 30px;
    border: none;
    background: transparent;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    transition: all 0.3s ease;
}

.part-buttons-horizontal .part-button:hover {
    background: #fff;
    color: #333;
}

.part-buttons-horizontal .part-button.active {
    background: #333;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Ring container */
.lamp-ring-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

/* SVG Ring */
.color-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

/* Farvede segmenter (synlige) */
.color-segment-visual {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Clickable segments (hover effect) */
.color-segment {
    cursor: pointer;
}

/* Hover effect på farveblokke */
.color-segment:hover {
    /* JavaScript håndterer hover via prev() sibling */
}

/* Active segment highlight */
.color-segment.active + .color-segment-visual {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

.ring-active-indicator {
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

/* Lampe i centrum */
.lamp-center-image {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 55%;
    z-index: 1;
}

.lamp-center-image .lamp-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible; /* Allow parts to extend beyond container if needed */
}

/* Lamp part positions - BRUGERENS VÆRDIER + HEIGHT FIX */
.lamp-part-top {
    top: -1px;
    width: 187px;
    height: 75px; /* TILFØJET - juster efter din PNG */
    left: 182px;
    z-index: 10;
}

.lamp-part-middle {
    top: 61px;
    width: 359px;
    height: 70px; /* TILFØJET - juster efter din PNG */
    z-index: 9;
}

.lamp-part-bottom {
    top: 74px;
    width: 151px;
    height: 120px;
    z-index: 8;
}


/* Valgt farve display */
.selected-color-display {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.selected-color-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.selected-color-info {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.selected-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #ccc;
}

.selected-color-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

/* Animation når del skiftes */
.lamp-part.highlight {
    animation: partPulse 0.6s ease-in-out;
}

@keyframes partPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Animation når farve vælges */
.selected-color-info {
    animation: colorSelected 0.4s ease-out;
}

@keyframes colorSelected {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================
   RESPONSIVE DESIGN - Omfattende Mobile/Tablet
   ============================================ */

/* Large Desktop (1200px og op) */
@media (min-width: 1200px) {
   /* Gør product layout flex */
   .woocommerce div.product {
       display: flex;
   }

   
    .lamp-ring-container {
        max-width: 700px;
    }
    
    .lamp-gallery-replacement .lamp-ring-mode {
        max-width: 700px;
    }
}

/* Desktop (992px og op) */
@media (max-width: 1199px) AND (min-width: 992px) {
   
   .lamp-part-top {
       top: -7px;
       width: 153px;
       left: 147px;
   }
   
   .lamp-part-middle {
       top: 42px;
       width: 291px;
   }
   
   .lamp-part-bottom {
       top: 49px;
       width: 123px;
   }
   
    .lamp-configurator-wrap {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    
    .lamp-preview {
        flex: 0 0 300px;
        margin-bottom: 0;
    }
    
    .lamp-options {
        flex: 1;
    }
    
    .lamp-gallery-replacement .lamp-ring-mode {
        max-width: 600px;
        display: block;
    }
    
    /* Standard flex layout for product */
    .woocommerce div.product {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }
    
    /*.woocommerce div.product .lamp-gallery-replacement {
        flex: 0 0 48%;
        max-width: 48%;
    }*/
    
    .woocommerce div.product .summary {
        flex: 1;
    }
}
@media (max-width: 991px) AND (min-width: 768px) {
 .lamp-part-top {
     top: -6px;
     width: 155px;
     left: 155px;
 }
 
 .lamp-part-middle {
     top: 46px;
     width: 305px;
 }
 
 .lamp-part-bottom {
     top: 54px;
     width: 128px;
 }
 }

/* Tablet (600px - 767px) */
@media (max-width: 767px) AND (min-width: 600px) {
    .lamp-part-top {
        top: -9px;
        width: 143px;
        left: 138px;
    }
    
    .lamp-part-middle {
        top: 38px;
        width: 276px;
    }
    
    .lamp-part-bottom {
        top: 43px;
        width: 116px;
    }
    
    .lamp-ring-container {
        max-width: 500px;
    }
    
    .lamp-center-image {
        width: 60%;
        height: 60%;
        top: 58%;
    }
    
    .part-buttons-horizontal {
        gap: 10px;
        padding: 6px;
    }
    
    .part-buttons-horizontal .part-button {
        padding: 10px 25px;
        font-size: 13px;
    }
    
    .selected-color-display {
        padding: 15px;
        margin-top: 20px;
    }
    
    /* Stack product layout på tablet */
    .woocommerce div.product {
        flex-direction: column;
    }
    
    .woocommerce div.product .lamp-gallery-replacement,
    .woocommerce div.product .summary {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 481px) AND (max-width: 599px)   {
   .lamp-part-top {
        top: -13px;
        width: 124px;
        left: 118px;
    }
    
    .lamp-part-middle {
        top: 27px;
        width: 235px;
    }
    
    .lamp-part-bottom {
        top: 27px;
        width: 99px;
    }
   
    .lamp-ring-mode {
        padding: 15px 10px;
    }
    
    .lamp-ring-container {
        max-width: 380px;
    }
    
    .lamp-center-image {
        width: 62%;
        height: 62%;
        top: 56%;
    }
    
    /* Del-vælger bliver vertikal på små skærme */
    .part-buttons-horizontal {
        flex-direction: column;
        border-radius: 12px;
        gap: 6px;
        padding: 6px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .part-buttons-horizontal .part-button {
        border-radius: 8px;
        padding: 12px 20px;
        width: 100%;
    }
    
    .lamp-part-selector-top {
        margin-bottom: 20px;
    }
    
    .lamp-part-selector-top label {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .selected-color-display {
        padding: 15px;
        margin-top: 20px;
    }
    
    .selected-color-label {
        font-size: 13px;
    }
    
    .selected-color-info {
        padding: 6px 15px;
        gap: 8px;
    }
    
    .selected-color-swatch {
        width: 20px;
        height: 20px;
    }
    
    .selected-color-name {
        font-size: 14px;
    }
    
    /* Stack product layout */
    .woocommerce div.product {
        flex-direction: column;
    }
    
    .woocommerce div.product .lamp-gallery-replacement,
    .woocommerce div.product .summary {
        width: 100%;
    }
}
@media (min-width: 400px) AND (max-width: 480px)   {
.lamp-part-top {
     top: -17px;
     width: 102px;
     left: 98px;
 }
 
 .lamp-part-middle {
     top: 16px;
     width: 196px;
 }
 
 .lamp-part-bottom {
     top: 12px;
     width: 82px;
     left: 97px;
      }
 .lamp-ring-container {
      max-width: 300px;
  }
 }

/* Extra Small Mobile (under 400px) */
@media (max-width: 399px) {
    .lamp-part-top {
         top: -16px;
         width: 110px;
         left: 104px;
     }
     
     .lamp-part-middle {
         top: 19px;
         width: 206px;
     }
     
     .lamp-part-bottom {
         top: 16px;
         width: 88px;
     }
    
    .lamp-ring-container {
        max-width: 320px;
    }
    
    .lamp-center-image {
        width: 65%;
        height: 65%;
        top: 54%;
    }
    
    .lamp-ring-mode {
        padding: 10px 5px;
    }
    
    .part-buttons-horizontal {
        max-width: 260px;
    }
    
    .part-buttons-horizontal .part-button {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .selected-color-display {
        padding: 12px;
        margin-top: 15px;
    }
    
  
}

/* Tablet/Mobile hybrid - 480px breakpoint */
@media (max-width: 480px) {
    .lamp-center-image {
        width: 65%;
        height: 65%;
    }
    
    .color-ring-svg {
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
    }
}

/* Landscape Mobile (max height 500px i landscape) */
@media (max-height: 500px) and (orientation: landscape) {
    .lamp-ring-container {
        max-width: 350px;
    }
    
    .lamp-center-image {
        width: 58%;
        height: 58%;
    }
    
    .lamp-part-selector-top {
        margin-bottom: 15px;
    }
    
    .selected-color-display {
        margin-top: 15px;
        padding: 12px;
    }
    
    .lamp-ring-mode {
        padding: 15px;
    }
}

/* Touch device specific */
@media (hover: none) and (pointer: coarse) {
    /* Større tap targets på touch devices */
    .part-buttons-horizontal .part-button {
        min-height: 44px;
    }
    
    .color-segment {
        /* Større clickable area på touch - øg stroke width */
        stroke-width: 25;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .color-ring-svg {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .lamp-ring-container {
        max-width: 500px;
    }
    
    .part-buttons-horizontal,
    .selected-color-display {
        display: none;
    }
    
    .woocommerce div.product {
        display: block;
    }
    
    .color-ring-svg {
        filter: none;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.part-button:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

.color-segment:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .part-button,
    .color-segment-visual,
    .selected-color-info,
    .lamp-part,
    .ring-active-indicator {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .part-button {
        border-width: 3px;
    }
    
    .part-button.active {
        border-color: #000;
        background: #000;
    }
    
    .color-segment-visual {
        stroke: #000;
        stroke-width: 2;
    }
    
    .selected-color-swatch {
        border-width: 3px;
        border-color: #000;
    }
}

/* Dark mode removed - caused issues with background */