/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 2, 2025, 5:40:18 PM
    Author     : aoham
*/


 label {
      font-weight: 600;
      display: block;
      margin-top: 0.8rem;
      font-size: 16px;
      text-align: left;
    }
   input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="datetime-local"],
textarea {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  transition: all 0.3s ease;
  position: relative;
  background-color: #fff;
  box-shadow: inset 0 0 0 0 #0077cc;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: inset 1000px 0 0 0 #e6f3ff, 0 0 0 2px #0077cc;
  animation: slideBorder 0.3s ease forwards;
}

@keyframes slideBorder {
  from {
    box-shadow: inset 0 0 0 0 #e6f3ff, 0 0 0 0 #0077cc;
  }
  to {
    box-shadow: inset 1000px 0 0 0 #e6f3ff, 0 0 0 2px #0077cc;
  }
}

    textarea {
      min-height: 100px;
    }
   .checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0rem 1rem;
  margin-top:-5px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: 500;
  gap: 0.6rem;
  cursor: pointer;
  color: #333;
}

/* Hide default checkbox and style it */
.checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #0077cc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  position: relative;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Checkmark fill */
.checkbox-group input[type="checkbox"]::before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #0077cc;
  border-radius: 2px;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

/* Checked state */
.checkbox-group input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* Hover effect */
.checkbox-group input[type="checkbox"]:hover {
  border-color: #005fa3;
}

   /* button { 
      margin-top: 2rem;
      padding: 0.8rem 1.5rem;
      background-color: #0077cc;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
    }
    button:hover {
      background-color: #005fa3;
    }
*/
    
   .theme-choice-group {
  margin-bottom: 2rem;
}


.theme-choice-options {
  display: flex;
  gap: 10rem; /* wider spacing between Yes and No */
  align-items: center;
}

.theme-choice-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
  color: #444;
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
  user-select: none;
}

.theme-choice-option input[type="radio"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.theme-radio-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #0077cc;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.3s ease;
}

.theme-choice-option input[type="radio"]:checked + .theme-radio-custom::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #0077cc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.theme-choice-option:hover .theme-radio-custom {
  border-color: #005fa3;
}


 /* Make sure minicolors field height and padding are clean */
.minicolors-input {
  height: 42px !important;
  padding: 0 0px 0 -30px !important; /* space for swatch */
  line-height: 42px;
  border-radius: 5px;
  font-size: 1rem;
}

/* Align swatch box inside input */
.minicolors-swatch {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 10px !important;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #ccc;
}


.radio-options {
  display: flex;
  gap: 2rem; /* spacing between Yes/No */
  margin-top: 0.5rem;
  flex-wrap: wrap;
  margin-top: 25px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  color: #333;
  user-select: none;
}

/* Hide default radio */
.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #0077cc;
  border-radius: 50%;
  
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
  display: grid;
  place-content: center;
  position: relative;
}

/* Checked state: inner dot */
.radio-option input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #0077cc;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

.radio-option input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Hover effect */
.radio-option input[type="radio"]:hover {
  border-color: #005fa3;
}

.questionaira {
    margin: 50px auto;

}
      div[data-acc-content] 
      {
          display: none;  
      }
      div[data-acc-step]:not(.open){
          
          background: #f1f6f7;  
      }
      div[data-acc-step]:not(.open) h5 {
          color: #777;  
      }
      div[data-acc-step]:not(.open) .badge-primary { 
          background:#F16622; 
      }

      
      .step-error {
    display: none;
    color: #e53935;
    font-weight: 500;
    background: #fcebea;
    border-left: 4px solid #e53935;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 1rem;
    margin-top: 20px;
    font-size: 0.95rem;
  }