/* =============================================================================
   PROBAR - IL PALLINO DI SELEZIONE (fonte unica per tutto il sito)
   -----------------------------------------------------------------------------
   Percorso: [child]/css/controls-ui.css  |  Caricato ovunque (peso irrisorio).

   PERCHE' ESISTE QUESTO FILE
   Radio e spunte native, su fondo nero, il browser le disegna bianche e
   squadrate: sembrano pezzi dimenticati in mezzo a una veste curata. Ogni
   pagina aveva finito per rimediare a modo suo (accent-color qui, 17px la',
   18px altrove, quadrata nella newsletter): quattro dialetti dello stesso
   controllo. Qui il pallino si definisce UNA volta sola.

   ASPETTO: cerchio scuro con anello chiaro a riposo, anello oro al
   passaggio del mouse, anello oro con punto d'oro dentro quando e' scelto.
   Identico per radio e caselle: sul nero conta la coerenza, non la
   distinzione fra le due meccaniche (che resta chiara dal contesto).

   COME SI ESTENDE: si aggiunge il selettore del nuovo contesto alle liste
   qui sotto. Mai riscrivere l'aspetto da capo altrove.

   NB: i colori sono scritti per esteso, non con le variabili del tema: cosi'
   il file regge anche se viene caricato prima del foglio che le definisce.
   ============================================================================= */

/* --- ASPETTO CONDIVISO ---------------------------------------------------- */
.woocommerce-checkout .wc_payment_methods input.input-radio,
.woocommerce-checkout .wc_payment_methods input[type="radio"],
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"],
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-account input[type="checkbox"],
.woocommerce-account input[type="radio"],
.abm-regf__radio input[type="radio"],
.abm-regf-privacy input[type="checkbox"],
.probar-privacy-checkbox {
  width: 20px !important;
  height: 20px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
  background: #0f0f0f !important;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.30, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.30, 1);
}

.woocommerce-checkout .wc_payment_methods input.input-radio:hover,
.woocommerce-checkout .wc_payment_methods input[type="radio"]:hover,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:hover,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:hover,
.woocommerce-account input[type="checkbox"]:hover,
.woocommerce-account input[type="radio"]:hover,
.abm-regf__radio input[type="radio"]:hover,
.abm-regf-privacy input[type="checkbox"]:hover,
.probar-privacy-checkbox:hover {
  border-color: #FFCE53 !important;
  box-shadow: 0 0 10px rgba(255, 206, 83, 0.3);
}

.woocommerce-checkout .wc_payment_methods input.input-radio:checked,
.woocommerce-checkout .wc_payment_methods input[type="radio"]:checked,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:checked,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked,
.woocommerce-account input[type="checkbox"]:checked,
.woocommerce-account input[type="radio"]:checked,
.abm-regf__radio input[type="radio"]:checked,
.abm-regf-privacy input[type="checkbox"]:checked,
.probar-privacy-checkbox:checked {
  border-color: #FFCE53 !important;
  background: radial-gradient(circle at center, #FFCE53 0 42%, transparent 48%), #0f0f0f !important;
}

/* Il fuoco da tastiera deve restare visibile: togliendo l'aspetto nativo
   si perde anche l'anello di sistema, e va rimesso a mano. */
.woocommerce-checkout .wc_payment_methods input[type="radio"]:focus-visible,
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"]:focus-visible,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"]:focus-visible,
.woocommerce-account input[type="checkbox"]:focus-visible,
.woocommerce-account input[type="radio"]:focus-visible,
.abm-regf__radio input[type="radio"]:focus-visible,
.abm-regf-privacy input[type="checkbox"]:focus-visible,
.probar-privacy-checkbox:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: 2px;
}

/* NB sui radio di SPEDIZIONE: nel checkout sono nascosti di proposito
   (la selezione avviene sulle card). Non compaiono in nessuna lista qui
   sopra proprio per non resuscitarli: se un giorno servisse vestirli,
   vanno prima liberati dalla regola che li nasconde. */