/*======================================
Theme Name: VirEwigMuller
Theme URI: https://divicake.com/
Description: VirEwigMuller For Divi Child
Version: 1.0
Author: WideWebWorx
Author URI: https://widewebworx.co.za
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

#rsvp-form {
	position: relative;
}

#rsvp-form .step-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

#rsvp-form .step-container > * {
	width: 100%;
}

#rsvp-form .input-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#rsvp-form .input-container label {
	font-size: 14px;
	color: white;
}

#rsvp-form .text-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
}

#rsvp-form .text-container p {
	color: white;
	font-size: 14px;
	text-align: center;
}

#rsvp-form .input-text-container input, #rsvp-form .textarea-container textarea {
	background-color: transparent;
	color: white;
	padding: 0.5rem 0.5rem;
	border: none;
	border-bottom: 1px solid white;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.1px;
	width: 100%;
	transition: all 0.25s ease;
}

#rsvp-form .input-text-container input:focus, #rsvp-form .input-text-container input:hover, #rsvp-form .textarea-container textarea:focus, #rsvp-form .textarea-container textarea:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

#rsvp-form .select-container select {
	background-color: transparent;
	color: white;
	padding: 0.5rem 0.5rem;
	border: none;
	border-bottom: 1px solid white;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.1px;
	width: 100%;
	transition: all 0.25s ease;
}

#rsvp-form .select-container select:hover, #rsvp-form .select-container select:focus {
	background-color: rgba(255, 255, 255, 0.1);
}


#rsvp-form .select-container select option {
	background: #323232 ;
	color: white;
}

#rsvp-form .select-container select option[disabled], #rsvp-form .select-container select:invalid {
	color: #6C756C;
}

#rsvp-form .radio-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}


#rsvp-form .radio-container label {
	padding: 8px 14px;
    border: 2px solid #ccc;
    border-radius: 50px;
    cursor: pointer;
	min-height: 35px;
	font-size: 12px;
	transition: all 0.25s ease;
}

#rsvp-form .radio-container label:hover, #rsvp-form .radio-container label:focus {
	background-color: rgba(255, 255, 255, 0.1);
}

#rsvp-form .radio-container input {
	opacity: 0;
    display: none !important;
}

#rsvp-form .radio-container label:has(input:checked)::before {
  content: '✔';
  font-size: 14px;
  color: #00ba09;
  text-align: center;
  line-height: 16px;
  margin-right: 5px;
}

#rsvp-form .radio-container label.no-label:has(input:checked)::before {
	content: "✗";
	color: #f54949;
}

#rsvp-form .inline {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

#rsvp-form .inline > * {
	flex: 1;
}




#rsvp-form button, #rsvp-form .button, #rsvp-form .text-button {
	cursor: pointer;
	transition: all 0.25s ease;
}

#rsvp-form .button, #rsvp-form .text-button {
	text-align: center;
    padding: 6px 0;
}

#rsvp-form .text-button {
	color: white;
	margin: 0 10px;
}

#rsvp-form .text-button:hover {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;
}

#rsvp-form button:hover, #rsvp-form .button:hover {
	transform: translateY(-2px);
}




#rsvp-form .action_buttons_container {
	margin-top: 30px;
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}

#rsvp-form .action_buttons_container button, #rsvp-form .action_buttons_container .button {
	background-color: white;
	color: black;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1px;
	width: 200px;
	height: 40px;
}

#rsvp-form .action_buttons_container button:hover, #rsvp-form .action_buttons_container .button:hover {
	border-color: white;
	background-color: transparent;
	color: white;
}



#rsvp-form .guest-block {
	padding: 12px 0;
	border-bottom: 1px solid white;
}

#rsvp-form .guest-block .guest {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#rsvp-form .guest-block .guest-name {
	font-size: 14px;
	font-weight: bold;
	color: white;
}

#rsvp-form .guest-block .responded {
	font-size: 12px;
	color: white;
	padding-left: 13px;
	position: relative;
}

#rsvp-form .guest-block .responded.attending {
	color: #00ba09;
}

#rsvp-form .guest-block .responded.not-attending {
	color: #f54949;
}

#rsvp-form .guest-block .responded::before {
	position: absolute;
	top: 0;
	left: 0;
}

#rsvp-form .guest-block .responded.attending::before {
	content: "✔";
}

#rsvp-form .guest-block .responded.not-attending::before {
	content: "✗";
}

#rsvp-form .guest-block .guest-summary {
	display: flex;
	gap: 10px;
}

#rsvp-form .guest-block .guest-summary .missing-required-field {
	color: #f54949;
	font-size: 12px;
	padding-left: 13px;
	position: relative;
}

#rsvp-form .guest-block .guest-summary .missing-required-field::before {
	content: "✗";
	position: absolute;
	top: 0;
	left: 0;
}

#rsvp-form .guest-block .respond {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
}

#rsvp-form .guest-block .respond button, #rsvp-form .guest-block .respond .button {
	width: 170px;
	height: 40px;
	background-color: transparent;
	border-radius: 4px;
	border: 2px solid white;
	text-align: center;
	color: white;
	font-size: 14px;
	font-weight: bold;
}

#rsvp-form .guest-block .respond button:hover, #rsvp-form .guest-block .respond .button:hover {
	background-color: white;
	color: black;
}




#rsvp-form .guest-answer-heading {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: white;
}

#rsvp-form .guest-answer-block, #rsvp-form .guest-answers {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
}

#rsvp-form .guest-answers > * {
	width: 100%;
}

#rsvp-form .guest-answers .question-label p {
	text-align: left;
}




#rsvp-form .loading-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #323232;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#rsvp-form .loading-container .loading-icon, #rsvp-form .loading-container .loading-icon svg {
	width: 100px;
	height: 100px;
}

#rsvp-form .loading-container .loading-text p {
	color: white;
}

#rsvp-form .error-container {
	background-color: #f54949;
	color: white;
	border-radius: 5px;
	padding: 7px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	font-weight: bold;
	max-width: 350px;
	margin: 0 auto;
}

@media only screen and (max-width: 767px) {
	#rsvp-form p, #rsvp-form label, #rsvp-form select, #rsvp-form input, #rsvp-form text-area, #rsvp-form button, #rsvp-form .button, #rsvp-form .text-button {
		font-size: 11px!important;
	}
	
	#rsvp-form button, #rsvp-form .button {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	
	#rsvp-form .inline > * {
		max-width: 50%;
	}
	
	#rsvp-form .inline.mobile-below {
		flex-direction: column;
	}
	
	#rsvp-form .inline.mobile-below > * {
		max-width: 100%;
		width: 100%;
	}
	
	#rsvp-form .inline.mobile-below .text-container, #rsvp-form .inline.mobile-below .radio-container, #rsvp-form .inline.mobile-below .select-container {
		align-items: center;
		justify-content: center;
	}
	
	#rsvp-form .textarea-container label {
		text-align: center;
	}
	
}