body {
  color: aqua;
  
}

.custom-btn {
  background: linear-gradient(135deg, #d9dad7, #8fa4c0); /* Gradient from light grey to light blue */
  color: #ffffff; /* White text for better contrast */
  border: none; /* Remove border to make gradient prominent */
  border-radius: 8px; /* Rounded corners for a modern look */
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.1s ease-in-out; /* Smooth transitions */
}

.custom-btn:hover {
  background: linear-gradient(135deg, #8fa4c0, #333333); /* Darker gradient on hover */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Add shadow for hover effect */
  transform: translateY(-2px); /* Slight movement upwards to give a lifting effect */
}

.custom-btn:active {
  background: linear-gradient(135deg, #6c757d, #333333); /* Darker gradient for active state */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Reduce shadow to simulate button press */
  transform: translateY(1px); /* Slight downward movement to simulate pressing */
}
.custom-btn:focus {
  outline: 2px solid #CFB53B;
  box-shadow: 0 0 8px rgba(207, 181, 59, 0.6);
}


.custom-save-btn {
  background-color: #CFB53B; /* Old gold color */
  color: #ffffff; /* White text */
  border: none; /* Remove border for a clean look */
  border-radius: 8px; /* Slight rounding of corners for a modern look */
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.1s ease-in-out; /* Smooth transition effects */
}

.custom-save-btn:hover {
  background-color: #b49b30; /* Darker shade of old gold for hover effect */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Slight shadow for a lifting effect */
  transform: translateY(-2px); /* Small upward movement to simulate lift */
}

.custom-save-btn:focus {
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 10px rgba(207, 181, 59, 0.5); /* Golden glow for focus */
}

.custom-save-btn:active {
  background-color: #a48428; /* Darker shade for active/pressed state */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Reduce shadow for pressed look */
  transform: translateY(1px); /* Slight downward movement to simulate button press */
}


#colorPaletteSection {
  display: flex;
  margin-top: 1rem;
  position: fixed; /* Keeps it fixed to the viewport */
  top: 10px;
  left: 10px;
  z-index: 100; /* Ensures it stays above other elements */
  background: rgba(240, 248, 255, 0.15); /* Subtle light blue overlay */
  border-radius: 12px; /* Add rounded corners for a modern feel */
  padding: 12px; /* Increased padding for space */
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3); /* Enhances floating effect */
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for separation */
  backdrop-filter: blur(10px); /* Adds a frosted glass effect */
}

#tipDisplay {
  font-size: 14px;
  color: #d9dad7; /* Soft grey for text */
  font-family: "Arial", sans-serif; /* Modern sans-serif font */
  animation: fadeTips 5s infinite; /* Smoothly fade tips in and out */
  font-weight: 500;
}

@keyframes fadeTips {
  0%, 100% { opacity: 0; transform: translateY(-5px); }
  50% { opacity: 1; transform: translateY(0); }
}

#colorPickerIcon {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9dad7, #CFB53B); /* Grey to Old Gold gradient */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  margin-right: 12px;
}

#colorPickerIcon:hover {
  transform: scale(1.15); /* Enhanced zoom effect on hover */
  box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow */
  background: linear-gradient(135deg, #CFB53B, #8fa4c0); /* Gold to Light Blue gradient */
}

#colorPicker {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}


._selectedHidden {
  display: none ;
}

#container3D {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #ccc;
}

#sidebar {
  height: 100vh;
  overflow-y: auto;
  padding: 100rem;
  background: rgba(128, 128, 128, 0.5); /* Semi-transparent grey */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Shadow for hover effect */

  /* backdrop-filter: blur(10px);* Glass-like effect */
  

}

@media (max-width: 768px) {
  #container3D{
    height: 70vh;
  }
  
}


#loadingSpinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #CFB53B, #8fa4c0); /* Gold to Light Blue gradient */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  animation: rotateSpinner 1.5s linear infinite;
}

#loadingSpinner::before,
#loadingSpinner::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: white; /* Inner reflective shine */
  opacity: 0.2;
  animation: pulse 1.5s ease-in-out infinite;
}

#loadingSpinner::after {
  inset: 20%;
  background: rgba(255, 255, 255, 0.6); /* A subtle second reflective layer */
  animation: pulse 1.5s ease-in-out infinite reverse;
}

@keyframes rotateSpinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}
/* Default Layout for Mobile */
.canopy-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Buttons appearance */
.canopy-btn {
  flex: 1 1 100%; /* Full-width buttons on mobile */
  max-width: 100%;
  text-align: left;
  padding: 8px 12px; /* Compact padding for smaller screens */
  font-size: 0.9rem; /* Smaller font for mobile */
}

/* Larger Screens Layout */
@media (min-width: 768px) {
  .canopy-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px;
  }

  .canopy-btn {
    flex: 0 1 auto; /* Allow buttons to shrink and fit */
    max-width: 100%;
  }

  
}

@media (min-width: 1024px) {
  .canopy-container {
    grid-template-columns: repeat(4, 1fr); /* Three columns for even spacing */
  }
}
.roof-feature-btn.active {
  background-color: #007bff;
  color: white;
}

#_roofFeatureSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
}

/* Buttons appearance */
.roof-feature-btn {
  flex: 1 1 100%; /* Full-width buttons on mobile */
  max-width: 100%;
  text-align: center; /* Center-align text for better aesthetics */
  padding: 10px; /* Add padding for better click area */
  transition: transform 0.3s, background-color 0.3s; /* Smooth transitions */
  border-radius: 5px; /* Rounded corners for a modern look */
}

/* Hover effect for buttons */
.roof-feature-btn:hover {
  background-color: #8b2323; /* Subtle background change on hover */
  transform: scale(1.05); /* Slight zoom effect */
}

/* Active button style */
.roof-feature-btn.active {
  background-color: #007bff;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Add subtle shadow for emphasis */
}

/* Larger Screens Layout */
@media (min-width: 768px) {
  #_roofFeatureSelect {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
    gap: 20px;
    justify-content: center;
  }

  .roof-feature-btn {
    flex: 0 1 auto; /* Allow buttons to fit grid layout */
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  #_roofFeatureSelect {
    grid-template-columns: repeat(3000, 1fr); /* Three columns for large screens */
    gap: 300000px; /* Increase spacing for better aesthetics */
  }

  .roof-feature-btn {
    padding: 15px; /* Increase padding for better visibility */
    font-size: 1rem; /* Adjust font size for readability */
  }
}

.header-shadow {
  position: fixed; /* Fixes the gradient at the top */
  top: 0;
  left: 0;
  width: 100%; /* Stretches across the width of the page */
  height: 2cm; /* 1-2 cm in height */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); /* Subtle fade */
  pointer-events: none; /* Ensures it's non-interactive */
  z-index: 9999; /* Makes sure it's above all content */
}