/* 
Theme Name: Stefano e Alice
Description: Stefano e Alice is a child theme of Hello Elementor, created by AR Comunicazione
Author: AR Comunicazione
Author URI: https://arcomunicazione.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: stefanoealice
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* FORM RSVP */
.isVisible {
  display: block !important;
   width: 100%;
}

/* Rimuove il bordo blu su focus (cross-browser) */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    box-shadow: none;
    border-color: #295E46!important; /* oppure qualunque colore desideri */
}

/* Rimuove l'aspetto nativo della select (mobile) */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}
/* Per i dispositivi mobile, soprattutto iOS */
select:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}

#partecipazione .form-row, #partecipazione .form-row--three-col{
	display:flex;
	justify-content:space-between;
	align-items:flex-start
}
#partecipazione .form-row div{
	width:49%;
}
#partecipazione .form-row--three-col div{
	width:32%;
	width:49%;
}
#partecipazione .name-surname-container div:not(:last-child){
}
#partecipazione .form-row input, #partecipazione .form-row select,#partecipazione .form-row--three-col input, #partecipazione .form-row--three-col select{
	height:48px;
}

input[type="submit"] {
    width: 100%; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    background-color: #334257;
    color: #fff;
	border:1px solid #334257;
	font-size:1.2em;
	text-transform:uppercase;
	padding:15px 0;
    font-family: "Arapey", Sans-serif;
}
input[type="submit"]:hover, input[type="submit"]:focus{
	background-color: #334257;
	border:1px solid #334257;
    color: #fff;
}

textarea, select, input[type="text"] {
    background-color: transparent;
    border: 1px solid #334257;
    color:#334257;
    font-family: "Arapey", Sans-serif;
    text-transform:uppercase;
}
input[type="email"], input[type="number"], input[type="phone"] {
    background-color: transparent;
    border: 1px solid #334257;
    color:#334257;
    font-family: "Arapey", Sans-serif;
    text-transform:uppercase;
}

#partecipazione h3{
	font-weight: 500;
    color: #334257;
    font-family: "Arapey", Sans-serif;
	font-size:1.1em;
	text-transform:uppercase;
	line-height: 1.2rem;
	margin-bottom:1rem;
}
label {
    font-weight: 500;
    color: #334257;
    font-family: "Arapey", Sans-serif;
	font-size:1em;
	text-transform:uppercase;
	line-height: 1.2rem;
	margin-bottom:6px;
}

#partecipazione span{
	font-weight: 500;
    color: #334257;
    font-family: "Arapey", Sans-serif;
	font-size:1.1em;
}

.row-m-b{
	margin-bottom:25px;
}
.half-width{
	width:100%;
}

/* Checkbox eventi */
.event-selection-container {
  margin: 20px 0;
}

.event-selection-container > label {
    font-weight: 500;
    color: #334257;
    font-family: "Arapey", Sans-serif;
	font-size:1em;
	text-transform:uppercase;
	line-height: 1.2rem;
	margin-bottom:6px;
}

.event-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.event-option {
  flex: 1 1 calc(50% - 15px);
  background: #f9f9f9;
  border: 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  user-select: none;
}

/* Checkbox invisibile, ma funzionante */
.event-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: white;
  position: relative;
  transition: all 0.2s ease;
}

/* Stato attivo nero */
.event-option input[type="checkbox"]:checked {
  background-color: #334257;
  border-color: #334257;
}

.event-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Hover e focus per interazione più chiara */
.event-option:hover {
  background: #eee;
}

@media (max-width: 768px) {
  .event-option {
    flex: 1 1 100%;
  }
}

.guests-box{
    margin-bottom:2rem;
}
.guests-box h3{
    font-family: "Arapey", Sans-serif;
    color:#334257;
    font-size:15px;
    text-transform:uppercase;
}
.guests-box button{
    font-family: "Arapey", Sans-serif;
    color:#334257;
	text-transform:uppercase;
    border-color:#334257;
    font-size:13px;
}
.guests-box button:hover, .guests-box button:focus{
    color:#fff;
    border-color:#334257;
    background-color:#334257;
}
.guests-box .guest{
    background: #F0F9FC;
    border-color:#334257!important;
    padding:1.5rem 1.5rem 0 1.5rem;
}
.guests-box .guest .removeGuestCta{
    background: transparent;
    border-color:#c34d4d!important;
    color:#c34d4d;
    padding:0 1.5rem;
    height:48px;
    position:relative;
    bottom:-2px;
}
.guests-box .guest .removeGuestCta:hover{
    background: #c34d4d;
    color:#fff;
}




.message-ok{
    background:#F0F9FC;
    font-family: "Arapey", Sans-serif;
    color:#334257!Important;
    font-size: 18px;
    padding: 2rem;
    border-radius: 4px;
}

@media screen and (max-width:600px){
    #partecipazione .form-row, #partecipazione .form-row--three-col{
        flex-wrap:wrap;
    }
    #partecipazione .form-row div, #partecipazione .form-row--three-col div {
        width: 100%;
    }
    #partecipazione .form-row div:first-child, #partecipazione .form-row--three-col div:first-child {
        margin-bottom:10px;
    }
    #privacy-policy-field{
        margin-top:10px;
    }
	.intolleranze{
		display:none;
	}
}

/* Login PSW page */
.login-password-protected .wp-login-logo{
	display:none!important;
}

.menu-rsvp{
    border:1px solid #fff!important;
    border-width:1px!important;
    border-radius:15px;
    padding:6px 10px!important;
    transition:.3s all;
}
.menu-rsvp:hover{
    background:#fff;
}
.menu-rsvp:hover a{
    color:#638C41!important;
}