/*
 * Ryan Long DDS Secure Payments
 *
 * Deliberately minimal and low-specificity so the active theme (TheGem) keeps
 * control of typography and colour. No !important, no resets, no framework.
 * Inherits font-family and colour from the theme by design.
 */

.rldds-payment {
	max-width: 34rem;
	margin: 0 auto;
}

.rldds-payment__heading {
	margin: 0 0 1rem;
}

/* Notices ---------------------------------------------------------------- */

.rldds-payment__notice {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border-left: 3px solid currentColor;
	border-radius: 0.1875rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rldds-payment__notice--success {
	color: #14532d;
	background: #ecfdf3;
}

.rldds-payment__notice--error {
	color: #7f1d1d;
	background: #fef2f2;
}

.rldds-payment__notice--info {
	color: #1e3a5f;
	background: #eff6ff;
}

.rldds-payment__notice--admin {
	color: #713f12;
	background: #fefce8;
}

/* Fields ----------------------------------------------------------------- */

.rldds-payment__field {
	margin: 0 0 1.25rem;
}

.rldds-payment__label {
	display: block;
	margin: 0 0 0.375rem;
	font-weight: 600;
}

.rldds-payment__req {
	color: #b91c1c;
}

.rldds-payment__input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.6875rem 0.75rem;
	border: 1px solid #94a3b8;
	border-radius: 0.25rem;
	background: #fff;
	color: inherit;
	font: inherit;
	/* 16px minimum prevents iOS Safari from zooming on focus. */
	font-size: 1rem;
}

.rldds-payment__input:focus {
	outline: 2px solid #1d4ed8;
	outline-offset: 1px;
	border-color: #1d4ed8;
}

.rldds-payment__input-group {
	display: flex;
	align-items: stretch;
}

.rldds-payment__prefix {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	border: 1px solid #94a3b8;
	border-right: 0;
	border-radius: 0.25rem 0 0 0.25rem;
	background: #f1f5f9;
	font-size: 1rem;
}

.rldds-payment__input--amount {
	border-radius: 0 0.25rem 0.25rem 0;
}

.rldds-payment__help {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: 0.8;
}

/* Honeypot: hidden from sighted users and assistive technology alike, but
   still submitted by naive bots. Not display:none, which some bots detect. */

.rldds-payment__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit ----------------------------------------------------------------- */

.rldds-payment__submit {
	display: inline-block;
	width: 100%;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 0.25rem;
	background: #1f2933;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.rldds-payment__submit:hover,
.rldds-payment__submit:focus {
	background: #111a22;
}

.rldds-payment__submit:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}

.rldds-payment__secure {
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	opacity: 0.75;
}

@media (min-width: 40em) {
	.rldds-payment__submit {
		width: auto;
	}
}