/**
 * authnet-card.css — baseline styling for the card fields this add-on mounts.
 *
 * The fields carry the legacy `...front-module--pm-card-detail-form` container
 * class in BOTH spellings (`bpa-` and `bpgc-`) plus the `el-input__inner`
 * structure, so wherever a host already styles those, its own look wins.
 *
 * This file exists because that is not everywhere: the Vue 3 booking form has no
 * card-detail rules at all, and the gift card stylesheet styles the container
 * but not a plain `<input>` (its markup uses `bp-ui-input` components). Without
 * a baseline the fields render as unstyled browser inputs on at least one host.
 *
 * Deliberately minimal and scoped to `.bpa-authnet-card-form`: enough to look
 * deliberate next to the surrounding form, not so much that it fights a theme.
 */

.bpa-authnet-card-form .bpa-authnet-row {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.bpa-authnet-card-form .bpa-authnet-row > .el-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* Month / year / CVV sit on one line, CVV narrower. */
.bpa-authnet-card-form .bpa-authnet-row--split > .el-input:last-child {
	flex: 0 0 90px;
}

/* Baseline field look, applied only where the host has not styled it. */
.bpa-authnet-card-form .el-input__inner {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #DDE0E4;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	line-height: 42px;
	color: #3C4250;
	outline: none;
}

.bpa-authnet-card-form .el-input__inner:focus {
	border-color: #12D488;
}

.bpa-authnet-card-form select.el-input__inner {
	appearance: none;
	-webkit-appearance: none;
	line-height: normal;
}

@media (max-width: 480px) {
	.bpa-authnet-card-form .bpa-authnet-row--split {
		flex-wrap: wrap;
	}
	.bpa-authnet-card-form .bpa-authnet-row--split > .el-input:last-child {
		flex: 1 1 100%;
	}
}