@import "components/add-card";

:root {
	--simplyin-primary: #3b82f6;
	--simplyin-primary-light: #60a5fa;
	--simplyin-primary-dark: #2563eb;
	--simplyin-surface: #ffffff;
	--simplyin-surface-alt: #f8fafc;
	--simplyin-border: #e5e7eb;
	--simplyin-border-light: #f3f4f6;
	--simplyin-text: #1f2937;
	--simplyin-text-muted: #6b7280;
	--simplyin-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--simplyin-radius: 8px;
	--simplyin-transition: all 0.2s ease;
}

#payment ul.wc_payment_methods {
	.payment_method_simplyin {
		img {
			object-fit: contain;
			max-width: 40px;
			height: 30px;
			margin: 5px;
		}

		& > p {
			margin-bottom: 10px;
		}
	}

	> li.wc_payment_method.payment_method_simplyin {
		img {
			float: unset !important;
			box-sizing: border-box;
		}

		> input {
			vertical-align: middle;
		}

		> label {
			display: inline-flex;
			align-items: center;

			& > img.simplyin-payment-provider-logo {
				height: 24px !important;
				max-width: unset !important;
				width: auto !important;
			}
		}

		> .payment_box.payment_method_simplyin {
			.payment_box_simplyin_d8s8.payment_method_bacs {
				padding: 0;
				background: transparent;
				border: none;

				&::before, &::after {
					display: none !important;
				}

				> .simplyin-payment-methods-wrapper {
					background: var(--simplyin-surface);
					border-radius: var(--simplyin-radius);
					padding: 16px;
					border: 1px solid var(--simplyin-border);
					max-width: 420px;

					.form-row {
						&::before,
						&::after {
							display: none !important;
						}

						& > .form-group {
							margin-inline: 0 !important;
							padding-inline: 0 !important;
						}
					}

					.simplyin-group-main {
						> ul {
							list-style: none;
							margin: 0;
							padding: 0;
							display: flex;
							flex-direction: column;
							gap: 8px;

							& .simplyin-payment-provider-footer {
								font-size: 12px;
								text-align: center;
								width: 100%;
								justify-content: center;
								margin-bottom: 16px;

								& > * {
									font-size: 12px;
									text-align: center;
									width: 100%;
									justify-content: center;
									margin-bottom: 16px;
								}

								& > a {
									color: var(--simplyin-primary);
									text-decoration: none !important;
								}
							}

							> li.simplyin-payment-option-group-item {
								border: 1px solid var(--simplyin-border) !important;
								margin-bottom: 0;
								padding: 0;
								border-radius: var(--simplyin-radius);
								background: var(--simplyin-surface);
								transition: var(--simplyin-transition);

								&:hover {
									border-color: var(
										--simplyin-primary-light
									) !important;
									cursor: pointer;
								}

								&.expanded,
								&.simplyin-selected-group {
									border-color: var(
										--simplyin-primary
									) !important;
									background: var(--simplyin-surface);
								}

								> label {
									display: flex;
									align-items: center;
									gap: 12px;
									cursor: pointer;
									font-size: 1em;
									font-weight: 500;
									text-indent: initial;
									min-height: 56px;
									padding: 16px;
									transition: var(--simplyin-transition);
									color: var(--simplyin-text);
									width: 100%;
									user-select: none;

									&:hover {
										background: var(--simplyin-surface-alt);
										border-radius: var(--simplyin-radius);
									}

									> input[type="radio"] {
										appearance: none;
										width: 18px;
										height: 18px;
										border: 2px solid var(--simplyin-border);
										border-radius: 50%;
										cursor: pointer;
										margin: 0;
										position: relative;
										transition: var(--simplyin-transition);

										&::before,
										&::after {
											display: none !important;
										}

										&:checked {
											border-color: var(
												--simplyin-primary
											);
											background: var(--simplyin-primary);

											&::after {
												content: "";
												position: absolute;
												top: 50%;
												left: 50%;
												transform: translate(
													-50%,
													-50%
												);
												width: 6px;
												height: 6px;
												border-radius: 50%;
												background: white;
											}
										}
									}

									.simplyin-inner-group-logo {
										display: flex;
										align-items: center;
										justify-content: center;
										height: 32px;
										min-width: 32px;
										border-radius: 4px;
										object-fit: contain;
									}

									.simplyin-inner-group-name {
										flex: 1;
										word-wrap: break-word;
										text-transform: capitalize;
									}
								}

								> .simplyin-inner-group-desc {
									display: none;
								}

								.simplyin-inner-group-wrapper {
									max-height: 0;
									overflow: hidden;
									transition: max-height 0.3s ease;
									list-style: none;
									margin: 0;
									padding: 0;

									&.active {
										max-height: 590px;
										overflow-y: auto;
										padding-bottom: 12px;
									}

									> li.simplyin-payment-option-item.inner-group-item {
										border: 1px solid
											var(--simplyin-border-light) !important;
										margin: 6px 12px;
										padding: 0;
										border-radius: var(--simplyin-radius);
										background: var(--simplyin-surface-alt);
										transition: var(--simplyin-transition);

										&:hover {
											border-color: var(
												--simplyin-primary-light
											) !important;
											cursor: pointer;
										}

										&.selected {
											border-color: var(
												--simplyin-primary
											) !important;
											background: var(--simplyin-surface);
										}

										> label.simplyin-payment-option-label {
											display: flex;
											align-items: center;
											gap: 10px;
											cursor: pointer;
											font-size: 0.9em;
											font-weight: 400;
											text-indent: initial;
											min-height: 48px;
											padding: 12px;
											transition: var(
												--simplyin-transition
											);
											color: var(--simplyin-text);
											width: 100%;
											user-select: none;
											margin-bottom: 0 !important;

											&:hover {
												background: var(
													--simplyin-surface
												);
												border-radius: var(
													--simplyin-radius
												);
											}

											@media only screen and (max-width: 375px) {
												min-height: 44px;
												padding: 10px;
											}

											> input[type="radio"] {
												appearance: none;
												width: 16px;
												height: 16px;
												border: 2px solid
													var(--simplyin-border);
												border-radius: 50%;
												cursor: pointer;
												margin: 0;
												position: relative;
												transition: var(
													--simplyin-transition
												);

												&::before,
												&::after {
													display: none !important;
												}

												&:checked {
													border-color: var(
														--simplyin-primary
													);
													background: var(
														--simplyin-primary
													);

													&::after {
														content: "";
														display: block !important;
														position: absolute;
														top: 50%;
														left: 50%;
														transform: translate(
															-50%,
															-50%
														);
														width: 4px;
														height: 4px;
														border-radius: 50%;
														background: white;
													}
												}
											}

											.simplyin-payment-option-logo {
												display: flex;
												align-items: center;
												justify-content: center;
												height: 28px;
												max-width: 40px;
												object-fit: contain;
											}

											.simplyin-payment-option-name {
												flex: 1;
												word-wrap: break-word;
											}
										}

										> .simplyin-payment-option-desc {
											display: none;
										}
									}
								}
							}

							> li.simplyin-payment-option-item:not(
									.inner-group-item
								) {
								border: 1px solid var(--simplyin-border) !important;
								margin-bottom: 0;
								padding: 0;
								border-radius: var(--simplyin-radius);
								background: var(--simplyin-surface);
								transition: var(--simplyin-transition);

								&:hover {
									border-color: var(
										--simplyin-primary-light
									) !important;
									cursor: pointer;
									border-radius: var(--simplyin-radius);
								}

								&.selected {
									border-color: var(
										--simplyin-primary
									) !important;
									background: var(--simplyin-surface);
								}

								> label.simplyin-payment-option-label {
									display: flex;
									align-items: center;
									gap: 12px;
									cursor: pointer;
									font-size: 1em;
									font-weight: 500;
									text-indent: initial;
									min-height: 56px;
									padding: 16px;
									transition: var(--simplyin-transition);
									color: var(--simplyin-text);
									width: 100%;
									user-select: none;
									margin-bottom: 0 !important;

									&:hover {
										background: var(--simplyin-surface-alt);
										border-radius: var(--simplyin-radius);
									}

									br {
										display: none !important;
									}

									@media only screen and (max-width: 375px) {
										min-height: 52px;
										padding: 14px;
									}

									> input[type="radio"] {
										appearance: none;
										width: 18px;
										height: 18px;
										border: 2px solid var(--simplyin-border);
										border-radius: 50%;
										cursor: pointer;
										margin: 0;
										position: relative;
										transition: var(--simplyin-transition);

										&::before,
										&::after {
											display: none !important;
										}

										&:checked {
											border-color: var(
												--simplyin-primary
											);
											background: var(--simplyin-primary);

											&::after {
												content: "";
												display: block !important;
												position: absolute;
												top: 50%;
												left: 50%;
												transform: translate(
													-50%,
													-50%
												);
												width: 6px;
												height: 6px;
												border-radius: 50%;
												background: white;
											}
										}
									}

									.simplyin-payment-option-logo {
										display: flex;
										align-items: center;
										justify-content: center;
										height: 32px;
										max-width: 48px;
										object-fit: contain;
									}

									.simplyin-payment-option-name {
										flex: 1;
										word-wrap: break-word;
									}
								}

								> .simplyin-payment-option-desc {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}

	.simplyin-blik-field-container {
		display: block;
		padding: 0 16px 16px;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		animation: simplyin-fadeIn 0.3s ease;

		&.active {
			display: block;
			animation: simplyin-fadeIn 0.3s ease;
		}
	}

	.simplyin-blik-input-wrapper {
		transition: var(--simplyin-transition);
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.simplyin-blik-label {
		display: block;
		font-size: 0.9em;
		font-weight: 500;
		color: var(--simplyin-text);
		margin-bottom: 16px;
		text-align: center;
	}

	.simplyin-blik-inputs-grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
		width: 100%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.simplyin-blik-digit-input {
		width: calc((100% - 40px) / 6);
		max-width: 44px;
		height: 48px;
		border: 2px solid var(--simplyin-border);
		border-radius: var(--simplyin-radius);
		font-size: 16px;
		padding: 0 !important;
		font-weight: 600;
		text-align: center;
		color: var(--simplyin-text);
		background: var(--simplyin-surface);
		transition: var(--simplyin-transition);
		outline: none;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		flex-grow: 0;
		box-shadow: unset;
		margin-inline: 0 !important;

		&:focus {
			border-color: var(--simplyin-primary);
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
			transform: scale(1.02);
			z-index: 1;
			position: relative;
		}

		&:hover:not(:focus) {
			border-color: var(--simplyin-primary-light);
		}

		&.error {
			border-color: #ef4444;
			background: #fef2f2;
			color: #dc2626;
			animation: simplyin-shake 0.4s ease;
		}

		&.valid {
			border-color: #22c55e;
			background: #f0fdf4;
			color: #166534;
		}
	}

	.simplyin-blik-error {
		color: #ef4444;
		font-size: 0.85em;
		text-align: center;
		margin-top: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		line-height: 1.4;

		&::before {
			content: "⚠️";
			font-size: 1em;
			flex-shrink: 0;
		}
	}

	.simplyin-blik-info {
		color: var(--simplyin-text-muted);
		font-size: 0.85em;
		text-align: center;
		margin-top: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		line-height: 1.4;

		&::before {
			content: "ℹ️";
			font-size: 1em;
			flex-shrink: 0;
		}
	}

	@keyframes simplyin-fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes simplyin-shake {
		0%,
		100% {
			transform: translateX(0);
		}
		20% {
			transform: translateX(-2px);
		}
		40% {
			transform: translateX(2px);
		}
		60% {
			transform: translateX(-2px);
		}
		80% {
			transform: translateX(2px);
		}
	}

	@media only screen and (max-width: 480px) {
		.simplyin-blik-field-container {
			padding: 0 12px 12px;
		}

		.simplyin-blik-input-wrapper {
			padding: 16px 12px;
		}

		.simplyin-blik-inputs-grid {
			gap: 6px;
			max-width: 240px;
		}

		.simplyin-blik-digit-input {
			width: calc((100% - 30px) / 6);
			max-width: 38px;
			height: 44px;
			font-size: 16px;
			padding: 0 !important;
		}
	}

	@media only screen and (max-width: 380px) {
		.simplyin-blik-input-wrapper {
			padding: 14px 10px;
		}

		.simplyin-blik-inputs-grid {
			gap: 4px;
			max-width: 220px;
		}

		.simplyin-blik-digit-input {
			width: calc((100% - 20px) / 6);
			max-width: 35px;
			height: 42px;
			font-size: 16px;
			padding: 0 !important;
		}
	}

	@media only screen and (max-width: 320px) {
		.simplyin-blik-input-wrapper {
			padding: 12px 8px;
		}

		.simplyin-blik-inputs-grid {
			gap: 3px;
			max-width: 200px;
		}

		.simplyin-blik-digit-input {
			width: calc((100% - 15px) / 6);
			max-width: 32px;
			height: 40px;
			font-size: 16px;
			padding: 0 !important;
		}
	}

	@media only screen and (max-width: 280px) {
		.simplyin-blik-inputs-grid {
			gap: 2px;
			max-width: 180px;
		}

		.simplyin-blik-digit-input {
			width: calc((100% - 10px) / 6);
			max-width: 29px;
			height: 38px;
			font-size: 16px;
			padding: 0 !important;
		}
	}
}

.simplyin-payment-methods-wrapper {
	&.loading {
		opacity: 0.7;
		pointer-events: none;
	}

	p,
	br {
		display: none !important;
	}
}

.simplyin-hidden-radio {
	display: none !important;
}

.simplyin-plus-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	cursor: pointer;
	transition: var(--simplyin-transition);
	color: var(--simplyin-text);

	&:hover {
		color: var(--simplyin-primary-light);
	}
}

li.simplyin-payment-option-item.selected {
	.simplyin-plus-icon {
		color: var(--simplyin-primary);
	}
}

li.simplyin-payment-option-item br {
	display: none !important;
}

.simplyin-redirect-overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto;
	min-height: 90vh;
	text-align: center;
	width: 90vw;
	background: var(--simplyin-surface);
	border-radius: var(--simplyin-radius);

	h2 {
		font-size: 2em;
		color: var(--simplyin-text);
		margin-bottom: 16px;
		font-weight: 600;

		@media only screen and (max-width: 768px) {
			font-size: 1.5em;
		}
	}

	> span {
		font-size: 1.1em;
		color: var(--simplyin-text-muted);

		@media only screen and (max-width: 768px) {
			font-size: 1em;
		}
	}
}

body.theme-astra {
	.woocommerce-checkout #payment .payment_method_simplyin img {
		margin: 0;
	}

	.payment_box.payment_method_simplyin > .simplyin-payment-methods-wrapper {
		margin-left: 0;
	}

	.woocommerce
		.woocommerce-checkout
		#payment
		ul.wc_payment_methods
		li.payment_method_simplyin
		.simplyin-group-main
		ul
		li {
		padding-left: 0;

		&.simplyin-payment-option-item,
		&.simplyin-payment-option-group-item {
			padding: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}