/**
 * ExploreXR Expert Camera Mode Add-On - Camera Styles
 * 
 * Styles for advanced camera controls in ExploreXR.
 */

/* Camera Controls Container */
.explorexr-premium-camera-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 4px;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 90%;
    max-width: 500px;
}

/* Control Groups */
.explorexr-premium-camera-control-group,
.explorexr-premium-camera-preset-group,
.explorexr-premium-camera-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Camera Control Buttons */
.explorexr-premium-camera-reset,
.explorexr-premium-camera-zoom-in,
.explorexr-premium-camera-zoom-out,
.explorexr-premium-camera-toggle-rotate,
.explorexr-premium-camera-toggle-fullscreen {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.explorexr-premium-camera-reset:hover,
.explorexr-premium-camera-zoom-in:hover,
.explorexr-premium-camera-zoom-out:hover,
.explorexr-premium-camera-toggle-rotate:hover,
.explorexr-premium-camera-toggle-fullscreen:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.explorexr-premium-camera-toggle-rotate.active,
.explorexr-premium-camera-toggle-fullscreen.active {
    background-color: rgba(33, 150, 243, 0.6);
}

/* Camera Icons */
.explorexr-premium-camera-icon {
    font-size: 18px;
    line-height: 1;
}

/* Camera Preset Dropdown */
.explorexr-premium-camera-presets {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 30px;
}

.explorexr-premium-camera-presets:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.explorexr-premium-camera-presets option {
    background-color: #333;
    color: white;
}

/* Full Screen Mode */
.explorexr-premium-model-viewer-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
}

.explorexr-premium-model-viewer-container:-moz-full-screen {
    width: 100vw;
    height: 100vh;
}

.explorexr-premium-model-viewer-container:fullscreen {
    width: 100vw;
    height: 100vh;
}

.explorexr-premium-model-viewer-container:-webkit-full-screen model-viewer {
    height: 100vh;
}

.explorexr-premium-model-viewer-container:-moz-full-screen model-viewer {
    height: 100vh;
}

.explorexr-premium-model-viewer-container:fullscreen model-viewer {
    height: 100vh;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .explorexr-premium-camera-controls {
        padding: 6px 10px;
        width: 95%;
    }
    
    .explorexr-premium-camera-reset,
    .explorexr-premium-camera-zoom-in,
    .explorexr-premium-camera-zoom-out,
    .explorexr-premium-camera-toggle-rotate,
    .explorexr-premium-camera-toggle-fullscreen {
        width: 32px;
        height: 32px;
    }
    
    .explorexr-premium-camera-icon {
        font-size: 16px;
    }
    
    .explorexr-premium-camera-presets {
        font-size: 12px;
        padding: 6px 10px;
        padding-right: 28px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .explorexr-premium-camera-controls {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .explorexr-premium-camera-preset-group {
        width: 100%;
        justify-content: center;
        order: 3;
    }
    
    .explorexr-premium-camera-presets {
        width: 100%;
        max-width: 100%;
    }
}