/**
 * Offline Credit Card Gateway — checkout form (classic + blocks).
 * Stripe-inspired: white surface, cool-gray hairlines, #0570de focus ring,
 * grouped card element with the brand icon set living inside the field.
 */

.occg-cc-form {
	--occg-text: #30313d;
	--occg-muted: #6a7383;
	--occg-placeholder: #8d919c;
	--occg-border: #d5dbe1;
	--occg-focus: #0570de;
	--occg-ring: rgba(5, 112, 222, 0.18);
	--occg-radius: 8px;
	--occg-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.02);

	border: 0;
	margin: 0;
	padding: 2px 0 0;
	text-align: left;
}

.occg-field {
	margin: 0 0 16px;
}

.occg-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--occg-text);
}

/* ---- Inputs -------------------------------------------------------------- */

.occg-cc-form .occg-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 11px 12px;
	min-height: 44px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--occg-text);
	background: #fff;
	border: 1px solid var(--occg-border);
	border-radius: var(--occg-radius);
	box-shadow: var(--occg-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

.occg-cc-form .occg-input::placeholder {
	color: var(--occg-placeholder);
	opacity: 1;
}

.occg-cc-form .occg-input:hover {
	border-color: #b8c0cc;
}

.occg-cc-form .occg-input:focus {
	border-color: var(--occg-focus);
	box-shadow: 0 0 0 3px var(--occg-ring), 0 1px 1px rgba(0, 0, 0, 0.03);
	position: relative;
	z-index: 2;
}

/* ---- Grouped card element (number / expiry+cvc) -------------------------- */

.occg-card-element {
	border-radius: var(--occg-radius);
}

.occg-card-element .occg-input {
	box-shadow: var(--occg-shadow);
}

.occg-element-number {
	position: relative;
}

.occg-element-number .occg-input {
	border-radius: var(--occg-radius) var(--occg-radius) 0 0;
	padding-right: 150px;
}

.occg-element-split {
	display: flex;
}

.occg-element-split .occg-input {
	margin-top: -1px; /* collapse the hairline between rows */
}

.occg-input-expiry {
	flex: 1 1 50%;
	min-width: 0;
	border-radius: 0 0 0 var(--occg-radius);
}

.occg-cvv-wrap {
	position: relative;
	display: block;
	flex: 1 1 50%;
	min-width: 0;
	margin-left: -1px; /* collapse the hairline between columns */
}

.occg-cvv-wrap .occg-input {
	width: 100%;
	border-radius: 0 0 var(--occg-radius) 0;
	padding-right: 40px;
}

/* ---- Brand icons inside the number field --------------------------------- */

.occg-brand-icons {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
	z-index: 3;
	pointer-events: none;
}

.occg-icon {
	display: inline-block;
	width: 30px;
	height: 20px;
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Hide the 5th+ accepted brand until it is the detected one. */
.occg-brand-icons[data-brand='unknown'] .occg-extra {
	display: none;
}

/* Once a brand is detected, collapse the set to the matching icon. */
.occg-brand-icons:not([data-brand='unknown']) .occg-icon {
	display: none;
}

.occg-brand-icons[data-brand='visa'] .occg-icon-visa,
.occg-brand-icons[data-brand='mastercard'] .occg-icon-mastercard,
.occg-brand-icons[data-brand='amex'] .occg-icon-amex,
.occg-brand-icons[data-brand='discover'] .occg-icon-discover,
.occg-brand-icons[data-brand='diners'] .occg-icon-diners,
.occg-brand-icons[data-brand='jcb'] .occg-icon-jcb {
	display: inline-block;
}

.occg-icon-visa {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%23fff' stroke='%23e0e6eb'/%3E%3Ctext x='18' y='16' font-family='Arial, Helvetica, sans-serif' font-size='9.5' font-style='italic' font-weight='800' fill='%231A1F71' text-anchor='middle'%3EVISA%3C/text%3E%3C/svg%3E");
}

.occg-icon-mastercard {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%23fff' stroke='%23e0e6eb'/%3E%3Ccircle cx='14.5' cy='12' r='6.5' fill='%23EB001B'/%3E%3Ccircle cx='21.5' cy='12' r='6.5' fill='%23F79E1B'/%3E%3Cpath fill='%23FF5F00' d='M18 6.9c1.75 1.3 2.8 3.15 2.8 5.1s-1.05 3.8-2.8 5.1c-1.75-1.3-2.8-3.15-2.8-5.1s1.05-3.8 2.8-5.1z'/%3E%3C/svg%3E");
}

.occg-icon-amex {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%232E77BC' stroke='%232E77BC'/%3E%3Ctext x='18' y='15' font-family='Arial, Helvetica, sans-serif' font-size='7' font-weight='800' fill='%23fff' text-anchor='middle'%3EAMEX%3C/text%3E%3C/svg%3E");
}

.occg-icon-discover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%23fff' stroke='%23e0e6eb'/%3E%3Ctext x='3.5' y='14.5' font-family='Arial, Helvetica, sans-serif' font-size='5.6' font-weight='800' fill='%234D4D4D'%3EDISC%3C/text%3E%3Ccircle cx='24' cy='12' r='4.5' fill='%23F27712'/%3E%3Cpath d='M28 21a22 22 0 0 0 7-4v2.5a4 4 0 0 1-4 4h-6a22 22 0 0 0 3-2.5z' fill='%23F27712'/%3E%3C/svg%3E");
}

.occg-icon-diners {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%23fff' stroke='%23e0e6eb'/%3E%3Ccircle cx='18' cy='12' r='7' fill='%230079BE'/%3E%3Crect x='16.7' y='5' width='2.6' height='14' fill='%23fff'/%3E%3C/svg%3E");
}

.occg-icon-jcb {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect x='.5' y='.5' width='35' height='23' rx='4' fill='%23fff' stroke='%23e0e6eb'/%3E%3Crect x='7.5' y='5' width='6.2' height='14' rx='3.1' fill='%230E4C96'/%3E%3Crect x='14.9' y='5' width='6.2' height='14' rx='3.1' fill='%23D6003C'/%3E%3Crect x='22.3' y='5' width='6.2' height='14' rx='3.1' fill='%23009B4B'/%3E%3C/svg%3E");
}

/* ---- CVC hint icon -------------------------------------------------------- */

.occg-cvc-hint {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 17px;
	z-index: 3;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Crect x='.5' y='.5' width='23' height='16' rx='2.5' fill='%23fff' stroke='%23b9c4ce'/%3E%3Crect x='1' y='3.2' width='22' height='3.4' fill='%23d5dbe1'/%3E%3Ccircle cx='14.5' cy='11.8' r='1.3' fill='%236a7383'/%3E%3Ccircle cx='17.7' cy='11.8' r='1.3' fill='%236a7383'/%3E%3Ccircle cx='20.9' cy='11.8' r='1.3' fill='%236a7383'/%3E%3C/svg%3E");
}

/* ---- Secure note ----------------------------------------------------------- */

.occg-secure-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--occg-muted);
}

.occg-lock {
	flex: 0 0 auto;
	width: 12px;
	height: 13px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Crect x='1' y='5.5' width='10' height='7' rx='1.5' fill='%236a7383'/%3E%3Cpath d='M3.5 6V4a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%236a7383' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ---- Blocks checkout description ------------------------------------------ */

.occg-blocks-description {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--occg-muted);
}

/* ---- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.occg-cc-form .occg-input {
		transition: none;
	}
}