#app {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

#house-container {
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: clamp(320px, 100%, 640px);
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
}

#svg-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 0;
  box-sizing: border-box;
  transition: height 0.3s ease; 
  height: auto; /* Allow height to adjust as per content */
  border-radius:16px;
  overflow:hidden;
}

#lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dummy-pickers-cont {
  text-align: right;
}

.dummy-pickers {
  display: flex;
}


#control-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-image: url('/wp-content/uploads/phone-background.svg?'); /* Add this line */
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  padding: 40px 10px; /* Maintain your existing padding */
  border-radius: 16px;
  max-width: 320px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 3px #414040, 0px 0px 0px 5px #191919, 0px 0px 0px 7px #111;
}

#active-pattern {
  color: white;
  font-size: 1.4em;
  margin-bottom: 10px;
  font-weight: 400;
}

input#color2,
input#color1 {
  padding: 0px !important;
  cursor:pointer;
}

.color-pickers-label {
  color: white;
  margin-bottom: 10px;
  align-self: flex-start;
}

label.live-picker-label {
  color: #ffffff;
}

.color-pickers {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin-bottom: 20px;
}

.color-picker,
.fake-color-picker {
  margin: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.fake-color-picker.placeholder {
  background: #898989;
  cursor: not-allowed;
  border: none;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.pattern-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  width: 100%;
}

.pattern-select label {
  margin-bottom: 10px;
}

.pattern-select.placeholder label,
.placeholder-label {
  color: #b3b3b3;
  font-style: italic;
  margin-right: auto;
}

.radio-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  cursor: pointer;
  padding: 5px 3px;
  color: white;
  width: 28%;
  text-align: left;
}

.radio-group input[type="radio"]:checked+label {
  color: white;
  border: 1px solid #ffffff;
  border-radius: 3px;
}

.radio-group .placeholder {
  cursor: not-allowed;
  padding: 5px 3px;
  border: 0px;
  border-radius: 5px;
  background: #ccc0;
  color: #b5b5b5;
  width: 30%;
  text-align: left;
  font-size: 16px;
}

.color-picker.disabled {
  filter: grayscale(100%) brightness(0.6);
  cursor: not-allowed !important;
}

button.circular-button {
  background-color: #FFFFFF !important;
  border: none !important;
}
img#purpleArrow {
  width: 20px!important;
  height: 20px!important;
    max-width:20px!important;
  border: none !important;
}

.slider-container {
  max-width: 100%;
  margin-top: 10px;
  cursor: not-allowed !important;
}

.slider-container img {
  max-width: 100%;
  border-radius: 6px;
}

.disc-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.disc-left-arrow {
  width: 10%;
  justify-content: center;
  display: flex;
}

img#house-image {
  width: 100%;
}

.disc-left-arrow img,
.disc-right-arrow img {
  max-width: 16px!important;
    cursor: pointer;
}

.disc-right-arrow {
  width: 10%;
  justify-content: center;
  display: flex;
  position: relative; /* Make it relative to position the button */
}

.arrow-forward {
  max-width: 16px; /* Ensure the forward arrow is correctly sized */
  margin: auto; /* Center the arrow */
}

.circular-button {
  width: 30px; /* Set button width */
  height: 30px; /* Set button height */
  border-radius: 50%; /* Make the button circular */
  background-color: white; /* Button background color */
  border: none; /* Remove border */
  position: absolute!important; /* Position it absolutely */
  bottom: -10px; /* Position it at the bottom of .disc-right-arrow */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally */
  cursor: pointer; /* Show pointer on hover */
  display: flex; /* Center the arrow inside */
  align-items: center; 
  justify-content: center; 
}

.disc {
  width: 80%;
  justify-content: center;
  display: flex;
  cursor: not-allowed;
}

.color-circle {
  display: inline-block;
  width: 12px;
  /* Diameter of the circle */
  height: 12px;
  /* Diameter of the circle */
  border-radius: 50%;
  /* Make it circular */
}

.color-circle.red {
  background-color: red;
  margin-right: 6px;
}

.color-circle.green {
  background-color: rgb(1, 209, 1);
  margin-right: 6px;
}

.color-circle.blue {
  background-color: blue;
  margin-right: 6px;
}

.color-circle.grey {
  background-color: rgb(128, 128, 128);
  margin-right: 6px;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(255, 0, 0);
  color: #fff;
  text-align: center;
  border-radius: 6px;
border:2px solid #ffffff;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 50%;
  margin-left: -70px;
  font-size:14px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 600ms;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease; /* Smooth transition */
}
.arrow-tooltip {
  visibility: visible;
  width: 40px; /* Adjust width as needed */
  background-color: #029402; /* Green background */
  color: #fff; /* White text */
  /* border:solid 1px #ffffff; */
  text-align: center;
  border-radius: 6px;
  padding: 3px 1px;
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 100%;
  margin-left: -40px; /* Center the tooltip */
  /* opacity: 0; Start as invisible */
  transition: opacity 0.3s; /* Smooth transition */
  font-size:14px;
  font-weight:500;
}
.picker-tooltip {
  visibility: visible;
  width: 60px; /* Adjust width as needed */
  background-color: #029402; /* Green background */
  color: #fff; /* White text */
  /* border:solid 1px #ffffff; */
  text-align: center;
  border-radius: 6px;
  padding: 5px 8px;
  position: absolute;
  z-index: 1;
  top: -80%;
  left: 60%;
  margin-left: -40px; /* Center the tooltip */
  /* opacity: 0; Start as invisible */
  transition: opacity 0.3s; /* Smooth transition */
  font-size:16px;
  font-weight:600;
}
/* .bounce{
  animation: bounce 1s infinite;}
@keyframes bounce {
	0% {transform: translateY(0px);}
  50% {transform: translateY(-5px);}
  100% {transform: translateY(0px);}
} */
.arrow-tooltip::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #029402 transparent transparent transparent;
}
.picker-tooltip::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #029402 transparent transparent transparent;
}
.rev-tooltip {
  visibility: visible;
  width: 60px; /* Adjust width as needed */
  background-color: #029402; /* Green background */
  color: #fff; /* White text */
  /* border:1px solid #ffffff; */
  text-align: center;
  border-radius: 6px;
  padding: 3px 1px;
  position: absolute;
  z-index: 1;
  top: 35px;
  left: 50%;
  margin-left: -40px; /* Center the tooltip */
  /* opacity: 0; Start as invisible */
  transition: opacity 0.3s; /* Smooth transition */
  font-size:14px;
  font-weight:500;
}
.rev-tooltip::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #029402 transparent;
}

.disc-left-arrow,
.disc-right-arrow,
.live-pickers,
.circular-button {
    position: relative; /* Needed for positioning the tooltip */
}

/* show tooltip for color picker */
.live-pickers:hover + .arrow-tooltip {
  visibility: visible;
  opacity: 1; /* Show tooltip on hover */
}
/* Show tooltip for back arrow image */
.arrow-back:hover + .arrow-tooltip {
    visibility: visible;
    opacity: 1; /* Show tooltip on hover */
}

/* Show tooltip for forward arrow image */
.arrow-forward:hover + .arrow-tooltip {
    visibility: visible;
    opacity: 1; /* Show tooltip on hover */
}

/* Show tooltip for circular button (purple arrow) */
.circular-button:hover .rev-tooltip {
    visibility: visible;
    opacity: 1; /* Show tooltip on hover */
}
.kc-trimlight-headline{
  color: var(--e-global-color-8694df1);
font-size: clamp(2.2rem, 1.5482rem + 1.3598vw, 2.5rem);
font-weight: 800;
text-transform: capitalize;
line-height: 1.2em;
text-align: right;
margin-bottom: -30px;
max-width: 80%;
margin-left: auto;
}
.demo-image img {
max-width: 50%!important;
}
.demo-text {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

/* Responsive styles */
@media (max-width: 500px) {
  #app {
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
  }

  #control-panel {
    max-width: 100%;
  }

  #house-container {
    order: -1;
    /* Move the house container above the control panel */
    width: 100%;
    max-width: 100%;
    flex-direction: column-reverse;
    margin-bottom:0px;
  }
  .demo-image{
    display:none;
  }
  .kc-trimlight-headline{
    font-size:20px;
    text-align:center;
    padding-bottom:20px;
    margin-bottom:0px!important;
    max-width:100%!important;
  }
  #lights .light {
    filter: none!important; /* Remove drop shadows */
}
}