/* FAMOUS Voice v0.16.9 - compact desktop + buttons aligned to input height */
.famous-voice-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Keep the button itself simple. The inner wrapper owns icon/text alignment. */
button.famous-voice-button,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  font: inherit !important;
  white-space: nowrap !important;
}

button.famous-voice-button:hover,
button.famous-voice-button:focus,
button.famous-voice-button:active,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button:hover,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button:focus,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button:active,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button:hover,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button:focus,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button:active {
  color: rgb(218, 0, 46) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: rgb(218, 0, 46) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

/* Styles Pro can inject decorative pseudo-elements on hover. Never use them on Voice. */
button.famous-voice-button::before,
button.famous-voice-button::after,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button::before,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button::after,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button::before,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button::after {
  content: none !important;
  display: none !important;
}

button.famous-voice-button:hover .famous-voice-button-inner,
button.famous-voice-button:focus .famous-voice-button-inner,
button.famous-voice-button:active .famous-voice-button-inner {
  color: rgb(218, 0, 46) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
button.famous-voice-button:disabled { opacity: .55; cursor: wait !important; }
button.famous-voice-button.is-recording { font-weight: 600 !important; }

/* Recording state: solid brand red, white icon/text. */
button.famous-voice-button.is-recording,
button.famous-voice-button.is-recording:hover,
button.famous-voice-button.is-recording:focus,
button.famous-voice-button.is-recording:active,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button.is-recording,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button.is-recording:hover,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button.is-recording:focus,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button.is-recording:active,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button.is-recording,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button.is-recording:hover,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button.is-recording:focus,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button.is-recording:active {
  color: #fff !important;
  background: rgb(218, 0, 46) !important;
  background-image: none !important;
  border-color: rgb(218, 0, 46) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

button.famous-voice-button.is-recording .famous-voice-button-inner,
button.famous-voice-button.is-recording:hover .famous-voice-button-inner,
button.famous-voice-button.is-recording:focus .famous-voice-button-inner,
button.famous-voice-button.is-recording:active .famous-voice-button-inner {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* One single theme-proof horizontal row: mic left, text vertically centered on it. */
button.famous-voice-button .famous-voice-button-inner,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button .famous-voice-button-inner,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button .famous-voice-button-inner {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

button.famous-voice-button .famous-voice-mic,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button .famous-voice-mic,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button .famous-voice-mic {
  display: inline-flex !important;
  flex: 0 0 32px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: static !important;
  transform: none !important;
}

button.famous-voice-button .famous-voice-mic svg,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button .famous-voice-mic svg,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button .famous-voice-mic svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

button.famous-voice-button .famous-voice-button-text,
.gf_stylespro_wrapper .gf_stylespro button.famous-voice-button .famous-voice-button-text,
.gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button .famous-voice-button-text {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  line-height: 1.15 !important;
  height: 32px !important;
  min-height: 32px !important;
  white-space: nowrap !important;
}

.famous-voice-status { font-size: .9em; }
.famous-voice-status[data-type="recording"],
.famous-voice-status[data-type="error"] { font-weight: 600; }

.famous-voice-timer {
  display: none;
  min-width: 52px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1em;
}
.famous-voice-control.is-recording .famous-voice-timer { display: inline-block; }

@media (max-width: 640px) {
  .famous-voice-control {
    width: 100% !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  button.famous-voice-button,
  .gf_stylespro_wrapper .gf_stylespro button.famous-voice-button,
  .gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  button.famous-voice-button .famous-voice-button-inner,
  .gf_stylespro_wrapper .gf_stylespro button.famous-voice-button .famous-voice-button-inner,
  .gf_stylespro_wrapper .gf_stylespro.sp_glass button.famous-voice-button .famous-voice-button-inner {
    justify-content: center !important;
  }

  .famous-voice-status,
  .famous-voice-timer {
    width: 100% !important;
  }
}


/* v0.16.9 — Desktop compatto: campo breve + pulsante sulla stessa riga, stessa altezza.
   La classe viene applicata solo ai campi voce brevi (non alla textarea Raccontaci di te). */
@media (min-width: 641px) {
  #gform_113 .gfield.famous-voice-inline-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: end !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .gfield_label,
  #gform_113 .gfield.famous-voice-inline-field > legend,
  #gform_113 .gfield.famous-voice-inline-field > .gfield_description,
  #gform_113 .gfield.famous-voice-inline-field > .gfield_validation_message {
    grid-column: 1 / -1 !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .ginput_container {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .ginput_container input,
  #gform_113 .gfield.famous-voice-inline-field > .ginput_container select {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: 100% !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control button.famous-voice-button {
    min-width: 210px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Stato e timer stanno sotto la riga campo+pulsante senza spostare il layout. */
  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control .famous-voice-status,
  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control .famous-voice-timer {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 6px) !important;
    white-space: nowrap !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control .famous-voice-timer {
    left: auto !important;
    right: 0 !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control {
    position: relative !important;
  }

  /* Riserva un po' di spazio quando compare uno stato, evitando sovrapposizioni col campo successivo. */
  #gform_113 .gfield.famous-voice-inline-field:has(.famous-voice-status:not(:empty)),
  #gform_113 .gfield.famous-voice-inline-field:has(.famous-voice-timer:not(:empty)) {
    padding-bottom: 28px !important;
  }
}

/* Mobile: torna verticale, campo sopra e pulsante sotto largo quanto il campo. */
@media (max-width: 640px) {
  #gform_113 .gfield.famous-voice-inline-field {
    display: block !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control {
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control .famous-voice-status,
  #gform_113 .gfield.famous-voice-inline-field > .famous-voice-control .famous-voice-timer {
    position: static !important;
  }
}