/**
 * CamPay checkout styles.
 */

#campay_payment_button a {
	padding: 10px;
	background-color: #FBFBFB;
}

#campay_payment_button a:hover {
	background-color: #f6f6f6;
}

#campay_payment_button a:after {
	display: block;
	content: "\f054";
	position: absolute;
	right: 15px;
	margin-top: -11px;
	top: 50%;
	font-family: "FontAwesome";
	font-size: 25px;
	height: 22px;
	width: 14px;
	color: #777777;
}

/* payment modal */
.campay_field_section {
	padding: 0 20px;
}

.campay_field_section .header_title {
	color: #222;
	font-size: 1.475rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.campay_field_section .wrapper {
	border-left: 16px solid #00a859;
	background-color: #eaf7f0;
	margin-top: 0;
	padding: 2em;
	width: 100%;
}

.campay_field_section .form-group {
	margin-bottom: 1em;
}

.campay_field_section input {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* status / error panels */
.campay-status-panel {
	text-align: center;
	padding: 1em 0;
}

.campay-status-text {
	font-weight: 600;
	color: #00a859;
}

.campay-status-sub {
	color: #777;
	font-size: 0.9em;
}

.campay-error-panel {
	text-align: center;
	padding: 1em 0;
}

.campay-error-text {
	color: #d9534f;
	font-weight: 600;
}

/* spinner */
.campay-spinner {
	width: 36px;
	height: 36px;
	margin: 0 auto 12px;
	border: 4px solid #d6ebe0;
	border-top-color: #00a859;
	border-radius: 50%;
	animation: campay-spin 0.9s linear infinite;
}

@keyframes campay-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	#campay_payment_button_modal .modal-dialog {
		width: calc(100vw - 16px);
		max-width: none;
		margin: 8px auto;
	}

	#campay_payment_button_modal .campay_field_section {
		padding: 0;
	}

	#campay_payment_button_modal .campay_field_section .wrapper {
		padding: 16px;
	}

	#campay_payment_button_modal .campay_field_section input,
	#campay_payment_button_modal .campay_field_section .btn {
		width: 100%;
		box-sizing: border-box;
	}
}