// Display utility classes
.magic-extra-field-checkbox-label,
.magic-extra-field-light-d-block {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.625rem;
}

.magic-extra-field-light-d-inline {
  display: inline;
}
/*input type text style */

.magic-input-password,
.magic-input-textarea,
.magic-input-email,
.magic-input-tel,
.magic-input-number,
.magic-extra-field-quantity,
.magic-input,
.magic-input-text {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-weight: 400;
  line-height: 1.8;
  background-color: #fff;
  border: 1px solid rgb(214, 217, 227);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:focus {
    color: #212529;
    outline-color: #d6d9e3;
    outline-offset: 2px;
    outline-width: 2px;
    outline-style: solid;
    border-color: #1b1e27;
  }

  &::placeholder {
    color: #6c757d;
    opacity: 1;
  }

  &:disabled {
    background-color: #e9ecef;
    opacity: 1;
  }
}
// checkbox layout
.magic-extra-field-checkbox-wrapper {
  &.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

.magic-extra-field-field {
  &.checkbox {
    .magic-extra-field-field-input {
      display: flex;
    }
  }
}
// .magic-extra-field-checkbox-wrapper {
//   display: flex;

//   .magic-extra-field-field {
//     .magic-extra-field-field-input {
//       position: relative;

//       input[type="checkbox"].magic-checkbox {
//         display: none;

//         &:not(:checked) + label,
//         &:checked + label {
//           padding-left: 35px;
//           cursor: pointer;
//           display: inline-block;
//           height: 25px;
//           line-height: 25px;
//           overflow: hidden;
//           user-select: none; // all modern browsers

//           &:before,
//           &:after {
//             content: "";
//             position: absolute;
//             left: 0;
//             z-index: 1;
//             transition: 0.2s;
//             width: 19px;
//             height: 19px;
//             border: 1px solid red; // Default border color
//             top: 3px; // Centers the box vertically within the label
//           }
//         }
//         &:not(:checked) + label:after {
//           z-index: 0;
//         }

//         &:checked + label:before {
//           content: "";
//           width: 10px;
//           height: 5px;
//           border: solid white;
//           border-width: 0 0 2px 2px;
//           transform: rotate(306deg);
//           left: 4px;
//           top: 8px; // Centers the checkmark vertically within the box
//           z-index: 2; // Ensure checkmark appears above background
//         }

//         &:checked + label:after {
//           background-color: red; // Changes the background color of the checkbox
//           z-index: 1;
//         }

//         &:disabled:not(:checked) + label:before,
//         &:disabled:checked + label:before {
//           top: 3px;
//           box-shadow: none;
//           background-color: #444;
//           width: 19px;
//           height: 19px;
//           border: 3px solid #444;
//           transform: rotateZ(0deg);
//         }

//         &:disabled + label {
//           color: #555;
//         }

//         &:disabled:not(:checked) + label:hover:before {
//           border-color: red;
//         }
//       }
//     }
//   }
// }

// Variables
$primary-color: #333;
$text-color: #333;
$border-color: #ccc;
$hover-color: #007bff;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

// Form container
.form-container {
  max-width: 400px;
  margin: 0 auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

// Field groups
.field-group {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

// Field titles
.field-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: $primary-color;
}

// Radio group
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.magic-extra-field-radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0;

  input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: $hover-color;

    &:focus {
      outline: none;
    }
  }

  label {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  &:hover {
    label {
      color: $hover-color;
    }
  }
}

// Checkbox group
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.magic-extra-field-field.checkbox .magic-extra-field-field-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0;

  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: $hover-color;

    &:hover {
      transform: scale(1.05);
    }

    &:focus {
      outline: none;
    }
  }

  label {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  &:hover {
    label {
      color: $hover-color;
    }
  }
}

// Responsive design
@media (max-width: 480px) {
  .form-container {
    padding: 1.5rem;
    margin: 1rem;
  }

  .field-title {
    font-size: 1rem;
  }

  .radio-text,
  .checkbox-text {
    font-size: 0.9rem;
  }
}

select.magic-input-select {
  padding: 13px 12px;
}

textarea.magic-input-textarea {
  font-family: inherit;
}

.magic-extra-filed-wrapper {
  .magic-extra-filed-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
    .magic-field-label {
      margin-bottom: 0;
    }
    .magic-field-label,
    .magic-extra-field-price {
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }
  .magic-extra-field-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    .magic-extra-field-input {
      flex: auto;
    }
    .magic-extra-field-quantity-input {
      width: 100px;
    }
  }
  &.textarea {
    .magic-extra-field-input-wrapper {
      align-items: start;
    }
  }
}

.magic-extra-field-field {
  &.password {
    .magic-extra-field-input {
      &.password-toggle-on {
        position: relative;
        .magic-input-password {
          padding-right: 20px;
        }
        .magic-password-toggle {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          padding: 3px 20px;
          width: auto;
          background: transparent;
          border: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-eye-off-icon lucide-eye-off'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143M2 2l20 20'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 1.2rem;
          cursor: pointer;
          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}

.magic-field-label {
  .magic-extra-field-required {
    color: #fb2c36;
  }
}