/********************
  Style general des forms
********************/

/********************
  Part - form-control (inputs, textarea, select)
********************/
.form-control {
  display          : block;
  width            : 100%;
  padding          : var(--input-padding-y) var(--input-padding-x);
  font-family      : var(--typo-primary);
  font-size        : var(--input-font-size);
  font-weight      : 400;
  line-height      : 1.5;
  color            : var(--color-black-default);
  background-color : var(--input-bg-color);
  background-clip  : padding-box;
  border           : 1px solid var(--input-border-color);
  border-radius    : var(--input-radius);
  transition       : border-color 0.2s ease, box-shadow 0.2s ease;
  appearance       : none;
}

.form-control:focus {
  border-color : var(--color-primary);
  box-shadow   : var(--input-focus-shadow);
  outline      : none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color : var(--color-grey-default);
  opacity          : 0.7;
  cursor           : not-allowed;
}

.form-control::placeholder {
  color   : var(--color-grey-font-default);
  opacity : 0.8;
}

/********************
  Part - form-control sizes
********************/
.form-control-sm {
  padding       : 0.5rem 0.75rem;
  font-size     : 0.8125rem;
  border-radius : var(--radius-sm);
}

.form-control-lg {
  padding       : 1rem 1.25rem;
  font-size     : 1rem;
  border-radius : var(--radius-lg);
}

/********************
  Part - textarea
********************/
textarea.form-control {
  min-height : 120px;
  resize     : vertical;
}

/********************
  Part - select
********************/
.form-control-select,
select.form-control {
  padding-right       : 2.5rem;
  background-image    : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position : right 0.75rem center;
  background-repeat   : no-repeat;
  background-size     : 1.25rem 1.25rem;
}

.form-control-select:focus,
select.form-control:focus {
  background-image : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/********************
  Part - input-group
********************/
.input-group {
  display  : flex;
  position : relative;
  width    : 100%;
}

.input-group .form-control {
  position  : relative;
  flex      : 1 1 auto;
  width     : 1%;
  min-width : 0;
}

.input-group .form-control:not(:last-child) {
  border-top-right-radius    : 0;
  border-bottom-right-radius : 0;
}

.input-group .form-control:not(:first-child) {
  border-top-left-radius    : 0;
  border-bottom-left-radius : 0;
}

.input-group .form-control:focus {
  z-index : 3;
}

.input-group-prepend,
.input-group-append {
  display : flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  border-radius : 0;
}

.input-group-prepend .btn:first-child,
.input-group-prepend > *:first-child {
  border-top-left-radius    : var(--input-radius);
  border-bottom-left-radius : var(--input-radius);
}

.input-group-append .btn:last-child,
.input-group-append > *:last-child {
  border-top-right-radius    : var(--input-radius);
  border-bottom-right-radius : var(--input-radius);
}

.input-group .input-group-btn > .btn {
  border      : 0;
  box-shadow  : none;
  color       : var(--color-white-default);
  font-size   : 0.875rem;
  font-weight : 500;
  height      : 100%;
  display     : flex;
  align-items : center;
  padding     : 0 1rem;
}

.input-group .input-group-btn > .btn-default {
  background : var(--color-secondary);
}

.input-group .input-group-btn > .btn[data-action=show-password] {
  background : var(--color-grey-font-default);
  padding    : 0.75rem 1rem;
}

/********************
  Part - form-group
********************/
.form-group {
  margin         : 0 0 1.25rem;
  display        : flex;
  flex-direction : column;
  gap            : 0.25rem;
}

.form-group .form-control-label,
.form-group .form-control-label ~ * {
  text-align : left;
}

.form-group .form-control-label {
  font-size   : 0.875rem;
  font-weight : 600;
  color       : var(--color-black-default);
}

.form-group .form-control-label .required {
  color : #ef4444;
}

.form-group .form-control {
  width : 100%;
}

.form-group .form-control-comment {
  font-size : 0.8125rem;
  color     : var(--color-grey-font-default);
}

/********************
  Part - form validation states
********************/
.form-group.has-error .form-control,
.form-control.is-invalid {
  border-color : #ef4444;
}

.form-group.has-error .form-control:focus,
.form-control.is-invalid:focus {
  border-color : #ef4444;
  box-shadow   : 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-group.has-error .help-block,
.invalid-feedback {
  color      : #ef4444;
  font-size  : 0.8125rem;
  margin-top : 0.25rem;
}

.form-group.has-success .form-control,
.form-control.is-valid {
  border-color : #22c55e;
}

.form-group.has-success .form-control:focus,
.form-control.is-valid:focus {
  border-color : #22c55e;
  box-shadow   : 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.valid-feedback {
  color      : #22c55e;
  font-size  : 0.8125rem;
  margin-top : 0.25rem;
}

/********************
  Part - custom-radio
********************/
.custom-radio {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  position        : relative;
  width           : 1.25rem;
  height          : 1.25rem;
  vertical-align  : middle;
  cursor          : pointer;
  border-radius   : 50%;
  border          : 2px solid var(--input-border-color);
  background      : var(--color-white-default);
  margin-right    : 0.75rem;
  transition      : border-color 0.2s ease;
}

.custom-radio:hover {
  border-color : var(--color-secondary);
}

.custom-radio input[type=radio] {
  position : absolute;
  opacity  : 0;
  cursor   : pointer;
  width    : 100%;
  height   : 100%;
  margin   : 0;
}

.custom-radio input[type=radio]:checked + span {
  display          : block;
  background-color : var(--color-primary);
  width            : 0.625rem;
  height           : 0.625rem;
  border-radius    : 50%;
}

.custom-radio input[type=radio]:focus + span {
  box-shadow : 0 0 0 3px rgba(var(--color-secondary-base), 0.25);
}

/********************
  Part - custom-checkbox
********************/
.custom-checkbox {
  position    : relative;
  display     : inline-flex;
  align-items : flex-start;
  cursor      : pointer;
}

.custom-checkbox input[type=checkbox] {
  position : absolute;
  opacity  : 0;
  cursor   : pointer;
  width    : 1.25rem;
  height   : 1.25rem;
  margin   : 0;
}

.custom-checkbox input[type=checkbox] + span {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 1.25rem;
  height          : 1.25rem;
  min-width       : 1.25rem;
  vertical-align  : middle;
  cursor          : pointer;
  border          : 2px solid var(--input-border-color);
  border-radius   : var(--radius-sm);
  background      : var(--color-white-default);
  margin-right    : 0.75rem;
  transition      : all 0.2s ease;
}

.custom-checkbox:hover input[type=checkbox] + span {
  border-color : var(--color-secondary);
}

.custom-checkbox input[type=checkbox] + span .checkbox-checked {
  display   : none;
  font-size : 1rem;
  color     : var(--color-white-default);
}

.custom-checkbox input[type=checkbox]:checked + span {
  background-color : var(--color-secondary);
  border-color     : var(--color-secondary);
}

.custom-checkbox input[type=checkbox]:checked + span .checkbox-checked {
  display : block;
}

.custom-checkbox input[type=checkbox]:focus + span {
  box-shadow : 0 0 0 3px rgba(var(--color-secondary-base), 0.25);
}

.custom-checkbox label {
  text-align  : left;
  cursor      : pointer;
  user-select : none;
}

/********************
  Part - switch/toggle
********************/
.custom-switch {
  position    : relative;
  display     : inline-flex;
  align-items : center;
  cursor      : pointer;
}

.custom-switch input[type=checkbox] {
  position : absolute;
  opacity  : 0;
  cursor   : pointer;
}

.custom-switch .switch-slider {
  position         : relative;
  width            : 2.75rem;
  height           : 1.5rem;
  background-color : var(--input-border-color);
  border-radius    : var(--radius-full);
  transition       : background-color 0.2s ease;
  margin-right     : 0.75rem;
}

.custom-switch .switch-slider::before {
  content          : '';
  position         : absolute;
  top              : 2px;
  left             : 2px;
  width            : 1.25rem;
  height           : 1.25rem;
  background-color : var(--color-white-default);
  border-radius    : 50%;
  transition       : transform 0.2s ease;
  box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.1);
}

.custom-switch input[type=checkbox]:checked + .switch-slider {
  background-color : var(--color-secondary);
}

.custom-switch input[type=checkbox]:checked + .switch-slider::before {
  transform : translateX(1.25rem);
}

.custom-switch input[type=checkbox]:focus + .switch-slider {
  box-shadow : 0 0 0 3px rgba(var(--color-secondary-base), 0.25);
}

/********************
  Part - quantity input (product page)
********************/
.qty-input-group {
  display       : inline-flex;
  align-items   : center;
  gap           : 0;
  border        : 1px solid var(--input-border-color);
  border-radius : var(--radius-md);
  overflow      : hidden;
  background    : var(--color-white-default);
}

.qty-input-group .qty-btn {
  border        : none;
  border-radius : 0;
  background    : var(--color-grey-default);
}

.qty-input-group .qty-btn:first-child {
  border-right : 1px solid var(--input-border-color);
}

.qty-input-group .qty-btn:last-child {
  border-left : 1px solid var(--input-border-color);
}

.qty-input-group .qty-input {
  width           : 3.5rem;
  height          : 2.5rem;
  text-align      : center;
  border          : none;
  font-size       : 1rem;
  font-weight     : 600;
  background      : transparent;
  -moz-appearance : textfield;
}

.qty-input-group .qty-input::-webkit-outer-spin-button,
.qty-input-group .qty-input::-webkit-inner-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

.qty-input-group .qty-input:focus {
  outline : none;
}

/********************
  Part - search input
********************/
.search-input-group {
  position    : relative;
  display     : flex;
  align-items : center;
}

.search-input-group .form-control {
  padding-left  : 2.75rem;
  padding-right : 2.75rem;
}

.search-input-group .search-icon {
  position       : absolute;
  left           : 0.875rem;
  color          : var(--color-grey-font-default);
  pointer-events : none;
}

.search-input-group .search-clear {
  position      : absolute;
  right         : 0.5rem;
  padding       : 0.25rem;
  color         : var(--color-grey-font-default);
  cursor        : pointer;
  border        : none;
  background    : none;
  border-radius : var(--radius-sm);
  transition    : color 0.2s ease;
}

.search-input-group .search-clear:hover {
  color : var(--color-black-default);
}