/*
 * Lloyds Cardnet Frontend Styles
 *
 * Copyright (c) 2020-Present Autify Digital Ltd.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 */

/* Payment Method Styles */
.payment_method_lloyds_cardnet_paymentjs_gateway p:first-child {
	margin-bottom: 10px;
}

.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway iframe {
	height: 46px !important;
}

/* SS-CARDSTYLE 2026-06-26: professional layout for the inline card form (was cramped, unstyled,
   text against the box edges, no spacing). Styles the wrapper, labels and field boxes; field text
   padding is set inside the iframe via the SDK styles. */
.payment_method_lloyds_cardnet_paymentjs_gateway .wc-payment-form,
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form {
	margin: 0;
	padding: 0;
}
/* The gateway "description" line (the encrypted/secure reassurance text). wpautop wraps it in a
   <p>; force clear spacing below it before the form, beating any theme last-child margin reset. */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway > p {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #6b6b66 !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
}
/* Guaranteed gap above the card fields regardless of how the description renders. */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form {
	margin-top: 18px !important;
}
/* Each field group (label + box) */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form > div {
	margin-bottom: 14px;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form > div:first-child {
	margin-bottom: 0;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .control-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #2c2c2a;
	margin: 0 0 6px;
	letter-spacing: 0.01em;
}
/* The field box that hosts each PaymentJS iframe. SS-CARDSTYLE: the PaymentJS SDK ignores the
   `padding` we set inside the iframe input, so we create the left gap on the HOST box instead and
   shrink the iframe width to match (see iframe rule below). */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields {
	background: #ffffff;
	border: 1px solid #d6d6d1;
	border-radius: 8px;
	height: 46px;
	padding: 0 0 0 14px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields:hover {
	border-color: #b9b9b2;
}
/* Focus state mirrored via the SDK's firstdata-field-focused class on the host element */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields.firstdata-field-focused,
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields.focus {
	border-color: #1a3a5c;
	box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.12);
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields.firstdata-field-invalid,
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields.invalid {
	border-color: #C01324;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields iframe {
	height: 46px !important;
	width: 100% !important;
	display: block;
}
/* Box now has 14px left padding; the iframe spans the remaining width so text starts inset. */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway .form-controls.payment-fields {
	box-sizing: border-box;
}
/* Exp / CVV side by side. Make the form a flex container and float the two cols to a row.
   !important to beat the WoodMart/WooCommerce checkout column rules that force full width. */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form {
	display: block;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form > .col1,
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form > .col2 {
	display: inline-block !important;
	float: left !important;
	width: calc(50% - 7px) !important;
	vertical-align: top;
	box-sizing: border-box !important;
	clear: none !important;
}
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form > .col1 {
	margin-right: 14px !important;
}
/* clear the float after the CVV row so PayPal etc. sits below */
.payment_box.payment_method_lloyds_cardnet_paymentjs_gateway form#form::after {
	content: "";
	display: table;
	clear: both;
}

.wc_payment_method.payment_method_lloyds_cardnet_redirect_payment label img,
.wc_payment_method.payment_method_lloyds_cardnet_paymentjs_gateway label img {
	padding-bottom: 15px;
}

/* Loading Indicator */
/* SS-SPINNER 2026-06-26: modern full-screen processing overlay (replaces the old what-processing.gif).
   Dark translucent backdrop + minimal CSS ring spinner + reassuring copy. */
.lloyds-custom-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(20, 22, 26, 0.72);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	z-index: 999999;
	text-align: center;
}
.lloyds-custom-loader .ss-pay-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.lloyds-custom-loader .ss-pay-spin {
	width: 48px;
	height: 48px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: ss-pay-spin 0.8s linear infinite;
}
.lloyds-custom-loader .ss-pay-text {
	margin-top: 18px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@keyframes ss-pay-spin {
	to { transform: rotate(360deg); }
}

/* Apple Pay Button (Apple <apple-pay-button> web component) */
#apple-pay-button {
	display: none;
	margin-bottom: 10px;
	--apple-pay-button-width: 300px;
	--apple-pay-button-height: 40px;
	--apple-pay-button-border-radius: 5px;
	--apple-pay-button-padding: 0;
	--apple-pay-button-box-sizing: border-box;
}

/* WooCommerce Payment Info */
#payment .wc_payment_methods li.wc_payment_method .woocommerce-info {
	display: block !important;
}