/*
Theme Name: My Prayer Board (Flash child)
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Flash WordPress theme.
Version: 1.0
Author: Craig Delahoy
Author URI: https://www.october.com.au
Text Domain: flash
Template: flash
*/

/* Add your own CSS code here */

button.mpb-button {
	background-color: #ffcc00 !important;
	border-radius: 30px !important;
	font-weight: 900 !important;
	font-size: 1.2em !important;
	color: #f0f0f0 !important;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
	padding: 14px 30px !important;
	box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.4) !important;
	-webkit-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.4) !important;
	-moz-box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.4) !important;
}

button.mpb-button:hover {
	background-color: #ffaa00 !important;
	color: #ffffff !important;
	box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.4) !important;
	-webkit-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.4) !important;
	-moz-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.4) !important;
}

input.wpforms-error {
	border: 2px solid red !important;
}

.process-alert {
	border: 1.5px solid #88dd88;
	border-radius: 5px;
	background-color: rgba( 18, 69, 8, 0.5 );
	padding: 15px;
	color: white;
	margin: 25px 0px;
	text-align: center;
	font-size: 1.1em;
}

.process-alert.error {
	border: 1.5px solid #dd4400;
	background-color: rgba( 160, 0, 0, 0.5 );
	color: #ffcc88;
}

/*	Hold the Stripe credit card form */
/* Modal background */
#payment-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
#payment-container {
    background: #eeeee0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
}
#payment-description {
	padding: 10px 0px;
	font-size: 0.95em;
	line-height: 1.3em;
}
#card-element {
	margin: 25px 0px;
	background-color: #f8f8f8;
	padding: 15px;
	font-size: 1.3em;
	border-radius: 8px;
}
#payment-buttons {
	display: flex;
}
#payment-buttons button {
	width: 10em;
    cursor: pointer;
    margin: 10px auto;
    padding: 8px 12px;
    border: 1px solid #888888;
	border-radius: 30px;
	font-size: 1.1em;
    color: #444444;
	opacity: 0.85;
}
#payment-buttons button:hover {
	opacity: 1;
}
#close-payment-modal {
	background-color: #e4e4e0;
}
#submit-payment {
	color: #ffffff !important;
	font-weight: 500;
}
#card-errors {
	padding-bottom: 10px;
	font-weight: 600;
}
#card-errors.error {
	color: red;
}
#card-errors.success {
	color: green;
}