.zca-wrapper {
	font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
	text-align: right;
}

.zca-title {
	margin: 1.2em 0 0.6em;
	font-size: 1.05em;
	font-weight: bold;
}

.zca-card-list {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
}

.zca-bank-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	flex-shrink: 0;
}

.zca-card-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #eee;
	background: #fafafa;
}

.zca-card-item:last-child {
	border-bottom: none;
}

.zca-card-pan {
	font-family: monospace, monospace;
	letter-spacing: 1px;
	direction: ltr;
	unicode-bidi: bidi-override;
}

.zca-no-cards {
	padding: 12px 14px;
	color: #777;
}

.zca-delete-card {
	background: transparent;
	border: 1px solid #d33 !important;
	color: #d33 !important;
	border-radius: 6px !important;
	padding: 4px 10px;
	font-size: 0.85em;
	cursor: pointer;
}

.zca-delete-card:hover {
	background: #d33 !important;
	color: #fff !important;
}

.zca-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zca-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.mb-2{
	margin-bottom: 2rem;
}
.cols-2 {
	display: flex;
	gap: 10px;
}

.zca-field label {
	font-size: 0.9em;
	color: #333;
}

.zca-field input {
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1em;
	direction: ltr;
	text-align: right;
	padding: 15px 10px;
}

.zca-field input:disabled {
	background: #f0f0f0;
	color: #666;
	cursor: not-allowed;
}

.zca-locked-note {
	font-size: 0.8em;
	color: #888;
}

.zca-field input:focus {
	border: 2px solid #0e05a4;
	outline: unset;
}

.zca-btn {
	display: inline-block;
	background: #0e05a4 !important;
	color: #fff !important;
	border: none;
	border-radius: 6px !important;
	padding: 10px 16px;
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.zca-btn:hover {
	background: #135e96 !important;
	color: #fff !important;
}

.zca-message {
	padding: 10px 14px;
	border-radius: 6px !important;
	margin-bottom: 14px;
}

.zca-message.zca-success {
	background: #e7f7ec !important;
	color: #1e7e34 !important;
	border: 1px solid #b7e4c7 !important;
}

.zca-message.zca-error {
	background: #fdecea !important;
	color: #c0392b !important;
	border: 1px solid #f5c6cb !important;
}

.zca-message.zca-warning{
	background: #fff3cd !important;
	color: #664d03 !important;
	border: 1px solid #664d03 !important;
}

.zca-card-select-row select {
	max-width: 100%;
	padding: 6px 10px;
	direction: ltr;
}

#zca_selected_card{
	width: 100% !important;
	margin-bottom: 1em;
	direction: ltr;
	text-align: center;
}

.add-card-link{
	color: #0e05a4;
	text-decoration: underline dotted #0e05a4;
}

/* Delete-confirmation modal (replaces window.confirm()) */
.zca-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s, background-color 0.22s ease;
	max-width: 100% !important;

}

.zca-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.22s ease, visibility 0s linear 0s, background-color 0.22s ease;
}

body.zca-modal-open {
	overflow: hidden;
}

.zca-modal-box {
	background: #fff;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	border-radius: 10px;
	padding: 20px 22px;
	max-width: 360px;
	width: 100%;
	text-align: right;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	direction: rtl;
	transform: scale( 0.92 ) translateY( 10px );
	opacity: 0;
	transition: transform 0.22s cubic-bezier( 0.34, 1.3, 0.64, 1 ), opacity 0.18s ease;
}

.zca-modal-overlay.is-open .zca-modal-box {
	transform: scale( 1 ) translateY( 0 );
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.zca-modal-overlay,
	.zca-modal-box {
		transition: none;
	}
}

.zca-modal-box h4 {
	margin: 0 0 10px;
	font-weight: bold;
}

.zca-modal-box p {
	margin: 0 0 18px;
	color: #444;
}

.zca-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
}

.zca-btn-danger {
	background: #d33 !important;
}

.zca-btn-danger:hover {
	background: #b32d2e !important;
	color: #fff;
}