/* Pinch Payments gateway styles (classic + blocks checkout). */

.flik-pinch-test-notice {
	background: #fff8e5;
	border-left: 3px solid #f0b849;
	padding: 8px 12px;
	font-size: 0.875em;
	margin: 0 0 1em;
}

.flik-pinch-save-notice {
	margin: 0.5em 0 0;
	font-size: 0.875em;
	color: #555;
}

/* Classic checkout gateway icon. */
.payment_method_flik_pinch img {
	height: 24px;
	width: auto;
	vertical-align: middle;
}

.flik-pinch-label {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.flik-pinch-icon {
	height: 24px;
	width: auto;
}

/* Accepted card scheme logos (plus the Flik logo) next to the gateway title.
 * margin-left: auto right-aligns the group in the blocks flex label; it is
 * inert in the classic checkout's inline label. */
.flik-pinch-card-icons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	margin-left: auto;
}

.payment_method_flik_pinch img.flik-pinch-card-icon,
img.flik-pinch-card-icon {
	height: 20px;
	width: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Card form layout — the classic checkout fieldset and the blocks wrapper div
 * share the .flik-pinch-card-form class.
 * ------------------------------------------------------------------------ */

.flik-pinch-card-form {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 12px;
	margin: 0.75em 0 0.25em;
	padding: 0;
	border: 0;
	background: transparent;
}

.flik-pinch-field {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

.flik-pinch-field-wide {
	flex: 1 1 100%;
}

.flik-pinch-field-half {
	flex: 1 1 calc(50% - 6px);
	min-width: 120px;
}

.flik-pinch-field label {
	display: block;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.3;
	color: #30313d;
	margin: 0 0 5px;
}

.flik-pinch-field label .required {
	color: #df1b41;
	text-decoration: none;
	border: 0;
}

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

.flik-pinch-card-form .flik-pinch-input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 11px 12px;
	font-size: 16px;
	line-height: 1.35;
	color: #30313d;
	background: #fff;
	border: 1px solid #e0e0e6;
	border-radius: 6px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 5px rgba(50, 50, 93, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
}

.flik-pinch-card-form .flik-pinch-input::placeholder {
	color: #8d8d95;
	opacity: 1;
}

.flik-pinch-card-form .flik-pinch-input:focus {
	border-color: rgba(5, 115, 225, 0.55);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 5px rgba(50, 50, 93, 0.06),
		0 0 0 3px rgba(5, 115, 225, 0.18);
}

/* Error state */
.flik-pinch-field.flik-pinch-invalid label {
	color: #df1b41;
}

.flik-pinch-card-form .flik-pinch-invalid .flik-pinch-input {
	border-color: #df1b41;
	color: #df1b41;
}

.flik-pinch-card-form .flik-pinch-invalid .flik-pinch-input:focus {
	border-color: #df1b41;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 5px rgba(50, 50, 93, 0.06),
		0 0 0 3px rgba(223, 27, 65, 0.16);
}

.flik-pinch-error-text {
	display: block;
	color: #df1b41;
	font-size: 0.8125em;
	line-height: 1.35;
	margin-top: 5px;
}

/* ---------------------------------------------------------------------------
 * Card brand icon inside the number field
 * ------------------------------------------------------------------------ */

.flik-pinch-input-wrap {
	position: relative;
}

.flik-pinch-input-wrap .flik-pinch-input {
	padding-right: 48px;
}

.flik-pinch-brand {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 28px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

.flik-pinch-brand-unknown,
.flik-pinch-brand-diners,
.flik-pinch-brand-jcb {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2020'%3E%3Crect%20x='.5'%20y='.5'%20width='29'%20height='19'%20rx='3'%20fill='%23fff'%20stroke='%23d9dce1'/%3E%3Crect%20x='2.5'%20y='4.5'%20width='25'%20height='4'%20rx='1'%20fill='%23d9dce1'/%3E%3Crect%20x='2.5'%20y='12'%20width='12'%20height='2.5'%20rx='1'%20fill='%23e7e9ec'/%3E%3C/svg%3E");
}

.flik-pinch-brand-visa {
	background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3E%3Cg%20transform='translate(-80.000000,%20-280.000000)'%20fill-rule='nonzero'%3E%3Cg%20transform='translate(40.000000,%20200.000000)'%3E%3Cg%20transform='translate(0.000000,%2080.000000)'%3E%3Cg%20transform='translate(40.000000,%200.000000)'%3E%3Crect%20stroke-opacity='0.2'%20stroke='%23000000'%20stroke-width='0.5'%20fill='%23FFFFFF'%20x='0.25'%20y='0.25'%20width='23.5'%20height='15.5'%20rx='2'%3E%3C/rect%3E%3Cpath%20d='M2.78773262,5.91443732%20C2.26459089,5.62750595%201.6675389,5.39673777%201,5.23659312%20L1.0280005,5.1118821%20L3.76497922,5.1118821%20C4.13596254,5.12488556%204.43699113,5.23650585%204.53494636,5.63071135%20L5.12976697,8.46659052%20L5.31198338,9.32072617%20L6.97796639,5.1118821%20L8.77678896,5.1118821%20L6.10288111,11.2775284%20L4.30396552,11.2775284%20L2.78773262,5.91443732%20L2.78773262,5.91443732%20Z%20M10.0999752,11.2840738%20L8.39882877,11.2840738%20L9.46284763,5.1118821%20L11.163901,5.1118821%20L10.0999752,11.2840738%20Z%20M16.2667821,5.26277458%20L16.0354292,6.59558538%20L15.881566,6.53004446%20C15.5737466,6.40524617%2015.1674138,6.28053516%2014.6143808,6.29371316%20C13.942741,6.29371316%2013.6415263,6.56277129%2013.6345494,6.82545859%20C13.6345494,7.11441463%2013.998928,7.3048411%2014.5939153,7.58725177%20C15.5740257,8.02718756%2016.0286384,8.56556562%2016.0218476,9.26818871%20C16.0080799,10.5486366%2014.8460128,11.376058%2013.0610509,11.376058%20C12.2978746,11.3694253%2011.5627918,11.2180965%2011.163808,11.0475679%20L11.4018587,9.66204513%20L11.6258627,9.76066195%20C12.1788958,9.99070971%2012.5428092,10.0889775%2013.221984,10.0889775%20C13.7117601,10.0889775%2014.2368857,9.89837643%2014.2435835,9.48488392%20C14.2435835,9.21565125%2014.0198586,9.01850486%2013.3617074,8.7164581%20C12.717789,8.42086943%2011.8568435,7.92848346%2011.8707973,7.04197926%20C11.8780532,5.84042483%2013.0610509,5%2014.7409877,5%20C15.3990458,5%2015.9312413,5.13788902%2016.2667821,5.26277458%20Z%20M18.5277524,9.0974856%20L19.941731,9.0974856%20C19.8717762,8.78889347%2019.549631,7.31147374%2019.549631,7.31147374%20L19.4307452,6.77964104%20C19.3467437,7.00942698%2019.1998574,7.38373457%2019.2069273,7.37055657%20C19.2069273,7.37055657%2018.6678479,8.74290137%2018.5277524,9.0974856%20Z%20M20.6276036,5.1118821%20L22,11.2839865%20L20.4249023,11.2839865%20C20.4249023,11.2839865%2020.2707601,10.5748181%2020.221922,10.3581228%20L18.0377903,10.3581228%20C17.9746264,10.5221933%2017.6807607,11.2839865%2017.6807607,11.2839865%20L15.8957988,11.2839865%20L18.4226343,5.62399144%20C18.5977072,5.22341512%2018.9059917,5.1118821%2019.3117663,5.1118821%20L20.6276036,5.1118821%20L20.6276036,5.1118821%20Z'%20fill='%231434CB'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.flik-pinch-brand-mastercard {
	background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2016'%20xmlns='http://www.w3.org/2000/svg'%20%3E%3Cg%20fill='none'%20fill-rule='evenodd'%3E%3Crect%20fill='%23252525'%20height='16'%20rx='2'%20width='24'%20/%3E%3Ccircle%20cx='9'%20cy='8'%20fill='%23eb001b'%20r='5'%20/%3E%3Ccircle%20cx='15'%20cy='8'%20fill='%23f79e1b'%20r='5'%20/%3E%3Cpath
%20%20%20%20%20%20d='m12%203.99963381c1.2144467.91220633%202%202.36454836%202%204.00036619s-.7855533%203.0881599-2%204.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986%202-4.00036619z'
%20%20%20%20%20%20fill='%23ff5f00'
%20%20%20%20/%3E%3C/g%3E%3C/svg%3E");
}

.flik-pinch-brand-amex {
	background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2016'%20xmlns='http://www.w3.org/2000/svg'%20%3E%3Cg%20fill='none'%20fill-rule='evenodd'%3E%3Crect%20fill='%23016fd0'%20height='16'%20rx='2'%20width='24'%20/%3E%3Cpath
%20%20%20%20%20%20d='m13.7640663%2013.3938564v-5.70139231l10.1475359.00910497v1.57489503l-1.1728619%201.25339231%201.1728619%201.2648839v1.6083094h-1.8726188l-.9951823-1.0981657-.9881105%201.1023204z'
%20%20%20%20%20%20fill='%23fffffe'
%20%20%20%20/%3E%3Cpath
%20%20%20%20%20%20d='m14.4418122%2012.7687956v-4.448884h3.7722872v1.02488398h-2.550895v.69569062h2.4900774v1.0078232h-2.4900774v.6833149h2.550895v1.0371713z'
%20%20%20%20%20%20fill='%23016fd0'
%20%20%20%20/%3E%3Cpath
%20%20%20%20%20%20d='m18.1952707%2012.7687956%202.087337-2.2270055-2.0874254-2.2217901h1.6156464l1.2754917%201.41003315%201.2791161-1.41003315h1.5461657v.03500552l-2.0428729%202.18678458%202.0428729%202.1638895v.063116h-1.5617237l-1.2981216-1.4241768-1.2847735%201.4241768z'
%20%20%20%20%20%20fill='%23016fd0'
%20%20%20%20/%3E%3Cpath
%20%20%20%20%20%20d='m14.2373481%202.6319558h2.4460552l.8591381%201.95085083v-1.95085083h3.0198453l.5207514%201.46156906.5225194-1.46156906h2.3059447v5.70139227h-12.1865193z'
%20%20%20%20%20%20fill='%23fffffe'
%20%20%20%20/%3E%3Cg%20fill='%23016fd0'%3E%3Cpath%20d='m14.7004641%203.25135912-1.9740111%204.44517127h1.3539006l.3724199-.89016575h2.0179447l.3721547.89016575h1.3875801l-1.96579-4.44517127zm.1696353%202.55743646.592-1.41507182.5915581%201.41507182z'%20/%3E%3Cpath%20d='m18.2119779%207.69573481v-4.44508288l1.903116.00654144.9792707%202.73272928.9856354-2.73927072h1.8316022v4.44508288l-1.1786077.01043094v-3.05334807l-1.1125746%203.04291713h-1.0758011l-1.1356464-3.05334807v3.05334807z'%20/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.flik-pinch-brand-discover {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2020'%3E%3Crect%20x='.5'%20y='.5'%20width='29'%20height='19'%20rx='3'%20fill='%23fff'%20stroke='%23d9dce1'/%3E%3Ccircle%20cx='21'%20cy='10'%20r='5'%20fill='%23F27712'/%3E%3Crect%20x='4'%20y='8.75'%20width='11'%20height='2.5'%20rx='1.25'%20fill='%23b9bdc4'/%3E%3C/svg%3E");
}

/* Stack the expiry/CVC pair on very narrow screens. */
@media (max-width: 400px) {
	.flik-pinch-field-half {
		flex-basis: 100%;
	}
}