/* Custom Styles for all changes made by onyva.xyz */

/* ===================================
   SHORTCODE BLOCK STYLES
   =================================== */

.shortcode-block {
  width: 100%;
}

.shortcode-block__content {
  /* Basis-Container für das Formular */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  
  .shortcode-block {
    padding: 0 1rem;
  }
}


/* ===================================
   NINJA FORMS CUSTOM STYLES
   =================================== */

/* Required Field */
.nf-field-description, .nf-form-fields-required {
	margin-bottom: 1rem;
}

/* Checkboxes */
.gra-nf-checkbox-container .nf-field-element ul li {
    padding-block: 0.5rem !important;
    margin-top: 0.2rem !important;
}

.gra-nf-checkbox-container .nf-field-element label {
    font-family: EB Garamond;
    font-weight: 300;
}

.gra-nf-checkbox-container input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    border: 1px solid #c1c1c1 !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    position: relative !important;
    cursor: pointer !important;
}

.gra-nf-checkbox-container input[type="checkbox"]:checked {
    background-color: #414141 !important;
}

/* Radio Buttons */

.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element {
	margin-top: 1rem;
}

.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element ul {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.nf-form-content .gra-nf-radio-container.gra-nf-radio-container--columns .list-radio-wrap .nf-field-element ul {
	flex-direction: column;
}

.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element li label {
	line-height: 1.5;
}

.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element li input:not(select) {
	padding-left: 1rem;
	padding-block: 0.5rem;
	margin-top: 0.2rem;
}


.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element li input.nf-checked {
    position: relative;
}

.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element li input.nf-checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #414141;
    border-radius: 50%;
}

.nf-form-content .gra-nf-radio-container .nf-field-description {
	margin-bottom: 0px;
}

.nf-form-content .gra-nf-radio-container .nf-field-label {
	font-family: Manrope,sans-serif;
	font-weight: bolder;
}


/* Radio Spendenformular */
.nf-form-content .gra-nf-radio-container .list-radio-wrap .nf-field-element ul[aria-describedby="nf-error-59"] {
	display: block;
}

/* Select Field */

body .nf-form-content select.ninja-forms-field {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23333' stroke-width='1.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.8rem;
}