/**
 * Checkout-specific styles.
 *
 * These override EDD and Stripe defaults that can't be handled with Tailwind utility classes.
 * The new theme uses Tailwind CDN, so only non-utility custom CSS is needed here.
 */

/* Alerts. */

.edd-alert.edd-stripe-alert.edd-alert-error {
	margin-top: 1rem;
	color: rgb(239 68 68);
}

#edd_purchase_submit .edd_errors,
#edd-purchase-button-wrap + .edd-alert {
	margin-bottom: 2.5rem;
	margin-top: 2.5rem;
	border-radius: 0.375rem;
	background-color: rgb(254 242 242);
	padding: 1rem;
	color: rgb(185 28 28);
}

#edd_purchase_submit .edd_errors {
	margin-top: 0;
}

.alert.special-discount {
	margin-bottom: 1rem;
	border-radius: 0.375rem;
	background-color: rgb(240 253 244);
	padding: 1rem;
	color: rgb(21 128 61);
}

/* Stripe elements. */

#edd-stripe-card-element.StripeElement--invalid {
	border-color: rgb(239 68 68);
	box-shadow: 0 0 0 1px rgb(239 68 68);
}

#edd-stripe-card-element.StripeElement--focus {
	border-color: rgb(254 71 21);
	box-shadow: 0 0 0 1px rgb(254 71 21);
}

/* Discounts */

a:not(.wp-element-button).edd_discount_remove {
	color: rgb(156 163 175);
}

a:not(.wp-element-button).edd_discount_remove:hover {
	color: rgb(75 85 99);
}

div.edd_cart_footer_row.edd_cart_discount_row:not([style="display: none;"]) {
	display: flex !important;
}

/* Recurring notice. */

.edd_cart_item_name .eddr-cart-item-notice {
	display: none;
}

/* SL upgrade notice. */

.edd-sl-upgrade-details-cart {
	display: none;
}

/* Purchase button spacing */

#edd_purchase_submit {
	margin: 2rem 0 0;
	padding: 0;
}

/* Telephone field. */

.iti {
	width: 100%;
}

.iti__flag {
	background-image: url("images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.iti__flag {
		background-image: url("images/flags@2x.png");
	}
}

/* Recurring notice */

#edd-recurring-sl-cancel-replace,
#edd-recurring-sl-auto-renew {
	margin-bottom: 1.25rem;
	border-radius: 0.375rem;
	background-color: rgb(254 252 232);
	padding: 1rem;
	color: rgb(161 98 7);
}

/* Spinner. */

.edd-loading,
.edd-loading:after {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
	border-radius: 9999px;
}

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

.edd-loading {
	position: absolute;
	left: calc(50% - 0.75em);
	top: calc(50% - 0.75em);
	animation: spin 1s linear infinite;
	border-width: 3px;
	border-color: rgb(255 255 255 / 0.2);
	border-left-color: rgb(255 255 255);
	font-size: 0.875rem;
	line-height: 1.25rem;
	opacity: 0;
}

.edd-loading-ajax.edd-loading {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
	border-color: rgb(0 0 0 / 0.2);
	border-left-color: currentColor;
	vertical-align: middle;
	opacity: 1;
}

#edd-user-login-submit .edd-loading-ajax.edd-loading,
#edd-purchase-button-wrap .edd-loading-ajax.edd-loading {
	position: absolute;
	left: auto;
	right: 1rem;
	top: calc(50% - 12px);
	border-color: rgb(255 255 255 / 0.2);
	border-left-color: rgb(255 255 255);
}

/* -------------------------------------------------------
 * Form inputs & labels
 * (Ported from duplicator-mods/style.css checkout section)
 * ------------------------------------------------------- */

.edd-input {
	padding: 11px 12px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #1F2937;
}

.edd-input::-webkit-input-placeholder {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #9CA3AF;
}

.edd-input::placeholder {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #9CA3AF;
}

.edd-label {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #1F2937;
}

/* Phone field left padding for country flag. */

#edd-phone {
	padding-left: 48px;
}

/* -------------------------------------------------------
 * Payment gateway images
 * ------------------------------------------------------- */

#edd-gateway-option-stripe img {
	width: 110px;
}

#edd-gateway-option-paypal_commerce img {
	width: 78px;
}

/* Gateway selected state (JS-applied class fallback). */

.edd-gateway-option-selected label {
	color: #0C182C;
	background: #FFFFFF;
	border: 2px solid #FE4715;
	box-shadow: 0px 3px 8px -1px rgba(68, 162, 167, 0.2);
}

/* -------------------------------------------------------
 * Section headings
 * ------------------------------------------------------- */

#edd_payment_mode_select h2 {
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	color: #1F2937;
}

#edd_payment_mode_select_wrap {
	margin: 48px 0;
}

#edd_cc_fields h3 {
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 30px;
}

/* -------------------------------------------------------
 * Cart items & totals
 * ------------------------------------------------------- */

.edd_cart_item_name,
.edd_cart_total {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 18px;
	color: #1F2937;
}

.edd_checkout_cart_item_title,
.edd_cart_item_price {
	font-weight: 700;
	font-size: 18px;
}

#edd-cart-total {
	font-weight: 500;
}

/* Discount row. */

.edd_cart_discount_row {
	border-top: 1px solid #d1d5db;
	color: #3A032D;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
}

.edd_discount_label {
	color: #3A032D;
}

/* Discount toggle link. */

#edd-discount-toggle {
	font-weight: 500;
	font-size: 14px;
	color: #6B7280;
}

/* -------------------------------------------------------
 * Credit card section
 * ------------------------------------------------------- */

.edd-stripe-new-card {
	background-color: #F3F4F6;
}

#edd-card-name-wrap label,
#edd-card-wrap label {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #0C182C;
}

.existing-card-wrapper {
	background: #F9FAFB;
	border: 1px solid #D1D5DB;
}

#edd_cc_fields {
	margin-bottom: 0;
}

/* -------------------------------------------------------
 * Purchase button
 * ------------------------------------------------------- */

#edd-purchase-button-wrap input,
#edd-purchase-button-wrap button {
	background: #FE4715;
	border-radius: 4px;
	font-weight: 900;
	font-size: 20px;
	line-height: 28px;
}

#edd-purchase-button-wrap button img {
	margin-left: 5px;
}

#edd_purchase_submit {
	margin-top: 24px;
}

/* -------------------------------------------------------
 * Testimonial section
 * ------------------------------------------------------- */

.testimonial {
	margin-top: 24px;
}

.testimonial > div {
	border: 2px solid #d1d5db;
	padding: 24px;
}

.testimonial-text {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #374151;
}

blockquote {
	background: transparent;
	border-left: none;
	margin: 1.5em 10px;
	padding: 0;
	quotes: none;
}

blockquote:before {
	content: none;
	font-size: 0;
	line-height: 0;
	margin-right: 0;
}

.testimonial footer p {
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
}

svg.text-orange-400 {
	width: 24px;
	height: 24px;
}

/* -------------------------------------------------------
 * Inline terms
 * ------------------------------------------------------- */

.inine-terms {
	margin-top: 21px;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: #79879C;
}

.inine-terms a {
	color: #FE4715;
}

/* Benefits section. */

.benefits {
	margin-top: 24px;
}

/* -------------------------------------------------------
 * Mobile responsive
 * ------------------------------------------------------- */

@media (max-width: 640px) {
	#checkout-progress > div {
		flex-direction: column;
		font-weight: 700;
		font-size: 10px;
		line-height: 16px;
	}

	#checkout-progress > div img {
		margin-bottom: 8px;
	}

	h2,
	#edd_cc_fields h3 {
		text-align: left;
	}

	.edd_cart_discount_row > div,
	.edd_cart_item > div,
	.edd_cart_footer_row > div {
		padding: 10px;
	}

	#edd_checkout_wrap {
		display: block;
	}

	#edd_register_fields h2 {
		margin-top: 30px;
	}
}