/* ================================================
   CONFIGURATOR COMPLEX CSS
   CSS that can't be easily converted to Tailwind
   ================================================ */

/* Image Viewer - Full Screen Positioning */
.mobile-preview-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 1;
    overflow: hidden;
}

/* Force #image-viewer to fill parent with absolute positioning - MOBILE ONLY */
.mobile-configurator .mobile-preview-background #image-viewer,
.mobile-configurator div.mobile-preview-background #image-viewer,
.mobile-configurator .mobile-preview-background>#image-viewer,
.mobile-configurator div#image-viewer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    overflow: hidden !important;
}

/* Force parent container to have dimensions - MOBILE ONLY */
.mobile-configurator .mobile-preview-background #image-viewer>div,
.mobile-configurator .mobile-preview-background #image-viewer>div.relative,
.mobile-configurator .mobile-preview-background #image-viewer>.relative,
.mobile-configurator #image-viewer>div,
.mobile-configurator #image-viewer>div.relative,
.mobile-configurator #image-viewer>.relative,
.mobile-configurator div#image-viewer>div[class*="relative"] {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Ensure images fill viewport - MAXIMUM PRIORITY */
.mobile-immersive-configurator .mobile-preview-background #image-viewer img,
.mobile-immersive-configurator .mobile-preview-background #image-viewer #background-image,
.mobile-immersive-configurator .mobile-preview-background #image-viewer #foreground-image,
.mobile-immersive-configurator .mobile-preview-background #image-viewer img#background-image,
.mobile-immersive-configurator .mobile-preview-background #image-viewer img#foreground-image,
div.mobile-preview-background #image-viewer img#background-image[style],
div.mobile-preview-background #image-viewer img#foreground-image[style] {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* Desktop configurator image viewer */
.desktop-configurator .viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.desktop-configurator #image-viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-configurator #image-viewer > div.relative {
    position: relative;
    width: 100%;
    height: 100%;
}

.desktop-configurator #image-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Hamburger menu animation */
.hamburger-menu span {
    transition: all 0.3s ease;
}

.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Smooth transitions for layout switching */
.desktop-configurator,
.mobile-configurator {
    transition: opacity 0.2s ease-in-out;
}

.desktop-configurator.hidden,
.mobile-configurator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ================================================
   SELECTED/ACTIVE BUTTON STATES
   Enhanced contrast for olive green background
   ================================================ */

/* All selected buttons - Option 3: Combined Approach */
.house-type-card.selected,
.mobile-house-type-card.selected,
.mobile-preset-btn.selected,
.facade-style-card.selected,
.wood-color-card.selected,
.door-type-card.selected,
.side-option.selected,
.material-option.selected,
.lichtstraat-option.selected,
button.selected,
.config-option.selected {
    background-color: #fef9f0 !important; /* Very subtle warm tint */
    border-color: #b8731a !important; /* Darker, more saturated orange */
    border-width: 3px !important; /* Thicker border for better contrast */
    box-shadow: 0 2px 4px rgba(193, 125, 31, 0.25) !important; /* Subtle shadow for depth */
    transition: all 0.2s ease !important;
}

/* ================================================
   DIMENSION LABEL RESPONSIVE BEHAVIOR
   Progressively hide labels based on viewport height
   ================================================ */

/* Default: Show both lines, hide compact subtitle */
.dimension-label-full {
    display: block;
}

.dimension-label-line1,
.dimension-label-line2 {
    display: inline;
}

.dimension-subtitle-compact {
    display: none !important;
}

/* Medium height: Hide "in meters", show only "Diepte x Breedte" */
@media (max-height: 800px) {
    .dimension-label-line2 {
        display: none;
    }
}

/* Small height: Hide all labels in buttons, show compact subtitle */
@media (max-height: 650px) {
    .dimension-label-full {
        display: none !important;
    }
    
    .dimension-subtitle-compact {
        display: inline !important;
    }
}