/* 3D Viewer Styles */
.model-viewer-container {
  width: 100%;
  height: 400px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.model-viewer-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Loading Indicator */
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-indicator div:last-child {
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}

/* Error Message */
.error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #dc3545;
  z-index: 10;
  max-width: 300px;
}

.error-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.error-message div:last-child {
  color: #dc3545;
  font-size: 14px;
  font-weight: 500;
}

/* Controls Info */
.viewer-controls-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 5;
}

/* Responsive Design */
@media (max-width: 480px) {
  .model-viewer-container {
    height: 200px;
  }
  
  .viewer-controls-info {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  /* Touch-friendly controls */
  .loading-indicator {
    padding: 15px;
    font-size: 14px;
  }
  
  .error-message {
    padding: 15px;
    font-size: 14px;
    max-width: 250px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .model-viewer-container {
    height: 250px;
  }
  
  .viewer-controls-info {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Modal Responsiveness */
@media (max-height: 800px) {
  .model-viewer-container {
    height: 200px !important;
  }
}

@media (max-height: 600px) {
  .model-viewer-container {
    height: 150px !important;
  }
}

/* Fullscreen Mode */
.model-viewer-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border: none;
  border-radius: 0;
}

.fullscreen-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  z-index: 5;
  transition: background 0.2s;
}

.fullscreen-toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* Model Stats */
.model-stats {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 5;
}

.model-stats div {
  margin: 2px 0;
}

/* Light Adjustment Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  border-radius: 4px;
  transition: background 0.3s;
}

.slider:hover {
  background: #bbb;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4a90e2;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

.slider::-webkit-slider-thumb:hover {
  background: #357abd;
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4a90e2;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

.slider::-moz-range-thumb:hover {
  background: #357abd;
  transform: scale(1.1);
}