/* Container principal */
.etc-estimation-widget 
{
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  color: var(--e-global-color-c730ada);
}

/* Thèmes (checkbox stylés comme radio) */
.etc-estimation-widget .themes {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px; 
}

.etc-estimation-widget .themes label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* Cacher la checkbox native */
.etc-estimation-widget .themes input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
  

/* Cercle custom */
.etc-estimation-widget .themes label::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
}

/* État coché */
.etc-estimation-widget .themes input[type="checkbox"]:checked + label::before {
  background: #fff;
  border-color: #fff;
}

/* Inputs */
.etc-estimation-widget .field {
  margin-bottom: 5px;
  display: flex;
  gap: 15px;
  align-items: end;
}

.etc-estimation-widget .field label 
{
  text-wrap-mode: nowrap;
}

.etc-estimation-widget .field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  padding: 5px 0;
  color: #fff;
}

/* Bouton Suivant */
.etc-estimation-widget .btn-suivant 
{
  background-color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-6e77604-font-family), Sans-serif;
  font-size: var(--e-global-typography-6e77604-font-size);
  font-weight: var(--e-global-typography-6e77604-font-weight);
  fill: var(--e-global-color-c730ada);
  color: var(--e-global-color-c730ada);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: var(--e-global-color-accent);
  border-radius: 0px 0px 0px 0px;
  padding: 8px 10px 8px 10px;

  min-width: 160px;

  margin-top: 20px;
}

.etc-estimation-widget .btn-suivant:hover 
{
  background-color: #02010100;
  color: var(--e-global-color-accent);
  border-color: var(--e-global-color-accent);
}

/* Select */
.field select {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.field select option {
  color: black;
}