.colorPicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2rem !important;
    height: 2rem !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
}


.custom-form-radio-label{
  margin-bottom: 0px !important;
}
.rating input:checked ~ input, .rating input[aria-checked=true] ~ input {
     opacity: 0.2;
}
input.mask-star-2:checked {
    border: 0 !important; /* remove any border */
}

.custom-form-radio:focus {
  outline: none !important;
  box-shadow: none !important;

    outline-style: none !important;
}
.display-submit-btn{
  border:0.25rem  solid transparent !important;
}
.display-submit-btn:hover {
  border:0.25rem  solid transparent !important;
   transform: none !important; /* prevent movement */
  box-shadow: none !important;
}
.submit-btn-text:hover {
  border:0px solid transparent !important;
   transform: none !important; /* prevent movement */
  box-shadow: none !important;
}
.display-submit-btn:active {
  border:0.25rem  solid transparent !important;
   transform: none !important; /* prevent movement */
  box-shadow: none !important;
}
.display-submit-btn:focus {
       outline-offset: 0px !important;
    outline: 0px dotted grey !important;
}
.remove-focus-box:focus{
   box-shadow: none !important;
    outline-offset: 0px !important;
    outline: 0px dotted grey !important;
}

/* -----------------------------


  Hide native radio buttons
----------------------------- */
.rating input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #ccc; /* dimmed star */
  -webkit-mask: url('../icons/star.svg') no-repeat center / contain;
  mask: url('../icons/star.svg') no-repeat center / contain; 
  transition: background-color 0.2s;
}

/* -----------------------------
  Remove any ::before / ::after dots
----------------------------- */
.rating input[type="radio"]::before,
.rating input[type="radio"]::after {
  content: none !important;
}

/* -----------------------------
  Checked star (green)
----------------------------- */
.rating input[type="radio"]:checked {
  background-color: #22c55e !important;
}

/* -----------------------------
  Hover effect: highlight star and previous stars
----------------------------- */
.rating input[type="radio"]:hover,
.rating input[type="radio"]:hover ~ input[type="radio"] {
  background-color: #22c55e !important; /* highlight hovered + previous stars */
  
}

/* -----------------------------
  Dim stars after hovered star
----------------------------- */

/* -----------------------------
  Optional: spacing between stars
----------------------------- */
.rating {
  display: flex;
  gap: 0.25rem; /* adjust spacing as needed */
}



#save-form-btn {

  cursor: pointer;
  
  transition: background-color 0.2s ease;
}

#save-form-btn:hover {
  background-color: #1d4ed8; /* darker blue on hover */
}