/* Traditional checkout styles */
.credit_cards img {
	display: inline;
	vertical-align: middle;
}

.credit_cards tr td {
	text-align: left !important;
}

#credit-card {
	width: 50%;
}

.add-card-heading {
	display: none;
}

.edit-card-heading {
	display: none;
}

.webgate-credit-card {
	display: none;
}

.cc-form-cancel {
	float: right;
	color: red;
}

.make-default {
	display: none;
}

.webgate-success-message {
	display: none;
}

.webgate-error-message {
	display: none;
}

select.wc-credit-card-form-token {
	padding: .6180469716em;
	background-color: #f2f2f2;
	color: #43454b;
	outline: 0;
	border: 0;
	border-radius: 2px;
	box-sizing: border-box;
	font-weight: 400;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .125)
}

/* Checkout block specific styles */
.wc-webgate-blocks-payment {
	width: 100%;
}

.wc-webgate-blocks-payment .form-row {
	margin-bottom: 1rem;
}

.wc-webgate-blocks-payment .form-row label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #2c3e50;
}

.wc-webgate-blocks-payment .form-row input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.wc-webgate-blocks-payment .form-row input:focus {
	outline: none;
	border-color: #007cba;
	box-shadow: 0 0 0 1px #007cba;
}

.wc-webgate-blocks-payment .form-row-container {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.wc-webgate-blocks-payment .form-row-first,
.wc-webgate-blocks-payment .form-row-last {
	flex: 1;
	margin-bottom: 0;
}

.wc-webgate-blocks-payment .required {
	color: #e74c3c;
}

.wc-webgate-blocks-payment .wc-block-components-validation-error {
	color: #e74c3c;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: block;
}

.wc-webgate-label {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.wc-webgate-label .payment-method-icons {
	margin-left: 10px;
}

.wc-webgate-label .payment-method-icons img {
	height: 20px;
	margin-left: 5px;
	vertical-align: middle;
}

/* Error styling for blocks */
.wc-webgate-blocks-payment input[style*="border-color: red"] {
	border-color: #e74c3c !important;
}

/* Save payment method checkbox styling */
.wc-webgate-blocks-payment .form-row label input[type="checkbox"] {
	width: auto;
	margin-right: 0.5rem;
	display: inline-block;
}

/* Responsive design for blocks */
@media (max-width: 768px) {
	.wc-webgate-blocks-payment .form-row-container {
		flex-direction: column;
		gap: 0;
	}

	.wc-webgate-blocks-payment .form-row-first,
	.wc-webgate-blocks-payment .form-row-last {
		margin-bottom: 1rem;
	}
}

/* Loading state */
.wc-webgate-blocks-payment.processing {
	opacity: 0.7;
	pointer-events: none;
}

/* Traditional form enhancements */
.webgate-error-notice {
	margin-top: 2rem;
	margin-bottom: 1rem;
	color: #e74c3c;
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem;
	background-color: #ffeaea;
	border: 1px solid #e74c3c;
	border-radius: 4px;
}