/* -------------------------------- 
FORMS & INPUTS
-------------------------------- */

p:empty { display:none }

.wp-block-social-links {
  border:2px solid red;
}

.form-message {
    --color:white;
    font-family: var(--wp--preset--font-family--header);
    color: var(--color);
    border: 1px solid var(--color);
    padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
    font-size: var(--wp--preset--font-size--h-4);
    text-align: center;
}

.form-message.error   { --color:#eb1414; }

.newsletter-send {
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
    
    font-size: var(--wp--preset--font-size--s);
    color:var(--wp--preset--color--yellow);
    text-align: center;
    font-weight: 600;

    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
 
    position: relative;
    border-radius: var(--radius-8);
    text-decoration: none;
    line-height: 1;

    overflow: hidden;
    background-color: red;
    cursor: pointer;

    transition: all 350ms ease;
}


form {
  --left:  0;
  --width: 120px;
  --size:  16px;
 
 
    width: 100%;
    position: relative;
    z-index: 5;
  --label:           var(--wp--preset--color--light);
  --inputBack:       rgb(255 255 255 / .75);
  --inputBorder:     rgb(255 255 255 / .75);
  --inputBorderFocus:var(--wp--preset--color--light);
}
 

label {
  color:var(--label);
  font-size: var(--wp--preset--font-size--s);
  display: block;
  margin-bottom: var(--wp--preset--spacing--xxs);
}


input:not([type=submit]),
textarea,
select {
  font-size: var(--wp--preset--font-size--p);
  color:   var(--wp--preset--color--dark);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs); 
  background-color: var(--inputBack); 
  border:2px solid var(--inputBorder);
  transition: all 350ms linear;
  display: flex;
  width: 100%;
}

input:not([type=submit]):focus,
textarea:focus,
select:focus,
.form-group input:valid,
.form-group textarea:valid,
.form-group select:valid {
  --inputBack:   rgb(255 255 255 / 1);
  --inputBorder: var(--wp--preset--color--bordergrey);
}

input:not([type=submit])::placeholder,
textarea::placeholder,
select::placeholder {
  color:black;
}
 
 
.form-group input:required:placeholder-shown {
    border:2px solid var(--inputBorder);

}


.form-group input:not(:focus):not(:placeholder-shown):invalid,
.form-group textarea:invalid:not(:focus):not(:placeholder-shown), 
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
    --inputBorder:red;
    background-color: pink;
    color: red;
}
 

.form-group select:required:not(:placeholder-shown):valid,
.form-group textarea:required:not(:placeholder-shown):valid,
.form-group input:required:not(:placeholder-shown):valid {
  background-color: white;
    box-shadow: var(--wp--preset--shadow--shadow-6);
 }


.form-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top:var(--wp--preset--spacing--m);
} 

form .wp-element-button { 
  flex:1;
  background-color: transparent;
  color: var(--wp--preset--color--light);
  border-color: var(--wp--preset--color--light);
  box-shadow: var(--wp--preset--shadow--shadow-6);
}

form .wp-element-button:hover {
  background-color: var(--wp--preset--color--light);
  color: var(--wp--preset--color--dark);
  border-color: var(--wp--preset--color--light);
} 


/*[sugarcalendar_events_list allow_user_change_display="false" image_position="left"]
[sugarcalendar_events_calendar]*/
 
/* -------------------------------- 

CHECKBOXES & RADIOS

-------------------------------- */
 
.form-check {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap:calc(var(--size)/2);
}

.form-check label {
  color: var(--label);
  font-size: var(--wp--preset--font-size--xs);
  cursor: pointer;
  margin:2px 0 0;
}

 
.form-check input[type="checkbox"] {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  z-index:-1;
  cursor: pointer;
}

input[type="checkbox"] + span { position:relative; } 
input[type="checkbox"] + span::before { 
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  border:2px solid var(--inputBorder);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

input[type="checkbox"] + span::after {
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  position: absolute;
  inset:0;
}
 
input[type="checkbox"]:checked + span::after, 
input[type="checkbox"]:checked + span::before {
  --inputBorder:white;
  box-shadow: var(--shadow-3);
  transition: transform .2s;
}

input[type="checkbox"]:checked ~ label {
  color: var(--label); 
 }
 
input[type="radio"]:checked + span::after,
input[type="checkbox"]:checked + span::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%2338d9a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  mask-size:  8px;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--inputBorder);
}