@import "./components/blik";

$color-primary: #3b82f6;
$color-secondary: #f1f1f1;
$link-color: #24b9d7;
$link-color-hover: #1a8196;
$status-color-success: #0e7b17;
$status-color-process: #ccc5c5;
$status-color-error: #a7301f;
$padding: 16px;

.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: $color-primary;
		text-decoration: none !important;
	}
}

.simplyin-block-payment,
.editor-styles-wrapper .simplyin-block-payment {
	list-style: none;

	& .simplyin-item-top {
		display: flex;
		gap: 12px;
		align-items: center;

		label {
			line-height: 1;
		}
	}

	.simplyin-saved-card {
		order: -1;

		& > label img {
			max-width: 38px;
		}
	}

	&-item {
		&::marker {
			content: "";
			visibility: hidden;
		}

		& > label {
			display: flex !important;
			flex-direction: column;
			border: 1px solid $color-secondary;
			margin: 10px 0 0;
			padding: $padding;
			border-radius: 8px;

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

				&::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;
					}
				}
			}

			img {
				box-sizing: content-box;
				width: 100%;
				max-width: 48px;
				height: auto;
			}

			.simplyin-block-payment-item-wrapper {
				line-height: 1.25;

				span {
					display: block;

					&.blik-error {
						color: $status-color-error;
					}
				}

				.simplyin-block-payment-label {
					flex-basis: 50%;
					font-size: 1em;
					font-weight: 600;
				}

				.simplyin-block-payment-description {
					display: none;
					flex: 0 0 100%;
					font-size: 0.75em;
					font-weight: 400;
					opacity: 0.8;
					margin-top: 3px;

					a {
						color: $link-color;
						text-decoration: none;

						&:hover {
							color: $link-color-hover;
						}
					}
				}
			}

			&.simplyin-active,
			&:hover {
				border-color: $color-primary;
				.simplyin-block-payment-item-wrapper {
					.simplyin-block-payment-description {
						display: block;
					}
				}
			}
		}

		&.simplyin-blik {
			input.blik-input {
				min-width: 215px;
				width: 100%;
			}
		}

		&.simplyin-has-children {
			.ReactCollapse--collapse {
				.ReactCollapse--content {
					margin-top: 15px;

					.simplyin-block-payment {
						display: grid;
						grid-template-columns: repeat(
							auto-fill,
							minmax(60px, 1fr)
						);
						gap: 0.3rem;

						&-item {
							label {
								flex-direction: column;
								justify-content: space-between;
								height: 100%;
								margin: 0;
								padding: 5px;
								min-height: auto;

								img {
									padding-right: unset;
								}

								.simplyin-block-payment-item-wrapper {
									.simplyin-block-payment-label,
									.simplyin-block-payment-description {
										display: none !important;
									}
								}
							}
						}
					}
				}
			}
		}

		&.simplyin-add-card {
			.simplyin-item-top input[type="radio"] {
				display: none !important;
			}

			.simplyin-plus-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 18px;
				height: 18px;
				cursor: pointer;
				transition: all 0.2s ease;
				color: #6b7280;

				&:hover {
					color: var(--simplyin-primary-light, #60a5fa);
				}

				svg {
					width: 18px;
					height: 18px;
				}
			}

			&.simplyin-active,
			label.simplyin-active {
				.simplyin-plus-icon {
					color: var(--simplyin-primary, #3b82f6);

					&:hover {
						color: var(--simplyin-primary-dark, #2563eb);
					}
				}
			}

			.simplyin-add-card-iframe-container {
				padding: 12px 0;
				border-radius: 8px;
				background: #ffffff;
				margin-top: 12px;
			}

			.simplyin-add-card-info {
				margin-bottom: 16px;
				font-size: 12px;
				color: #64748b;
				text-align: center;
				line-height: 1.4;

				p {
					margin: 0;
					padding: 12px 16px;
					background: #f1f5f9;
					border-radius: 6px;
					border-left: 3px solid #3b82f6;
					color: #1e40af;
					font-weight: 500;
				}
			}

			.simplyin-iframe-wrapper {
				position: relative;
				margin-bottom: 12px;
			}

			.simplyin-add-card-iframe {
				display: block;
				background-color: white;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
					sans-serif;
				margin-bottom: 0 !important;

				.simplyin-iframe-loading {
					text-align: center;
					padding: 20px;
					color: #6b7280;
					font-size: 14px;

					p {
						margin: 0;
					}
				}

				.form-group {
					margin-bottom: 16px;

					&:last-child {
						margin-bottom: 0;
					}

					&.card-name-group {
						margin-bottom: 16px;

						&.card-name-group-hidden {
							display: none;
						}
					}

					label {
						color: #374151;
						display: block;
						font-size: 12px;
						font-weight: 500;
						margin-bottom: 6px;
					}

					.form-control {
						width: 100%;
						padding: 10px 12px;
						border: 1px solid #d1d5db;
						border-radius: 4px;
						font-size: 14px;
						font-family: inherit;
						background-color: #ffffff;
						height: 45px;
						box-sizing: border-box;

						&::placeholder {
							color: #9ca3af;
							font-weight: 400;
						}

						&:focus {
							outline: none;
							border-color: #3b82f6;
							box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
						}
					}

					.card-field {
						border: 1px solid #d1d5db;
						border-radius: 4px;
						background-color: #ffffff;
						overflow: hidden;
						min-height: 45px;
						box-sizing: border-box;

						&:focus-within {
							border-color: #3b82f6;
							box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
						}

						.ccIframe-component {
							padding: 10px 12px;
							font-size: 14px;

							iframe {
								height: 20px !important;
								min-height: 20px !important;
								border: none;
								width: 100%;
							}
						}
					}

					label:has(input[type="checkbox"]) {
						display: flex;
						align-items: center;
						gap: 8px;
						margin-bottom: 12px;
						margin-top: 16px;
						padding: 12px 0;
						font-weight: 400;
					}

					input[type="checkbox"] {
						background-color: #fff;
						border: 1px solid #d1d5db;
						border-radius: 3px;
						cursor: pointer;
						flex-shrink: 0;
						height: 16px;
						margin: 0;
						position: relative;
						width: 16px;

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

				.form-row {
					display: flex;
					flex-direction: column;
					gap: 16px;
					margin-bottom: 16px;
					padding: 0 !important;

					.form-group {
						margin-bottom: 0;
					}

					@media (min-width: 480px) {
						flex-direction: row;

						.form-group {
							flex: 1;
						}
					}
				}

				.simplyin-card-success {
					background-color: #f0f9ff;
					border: 1px solid #0ea5e9;
					border-radius: 6px;
					padding: 12px 16px;
					margin: 16px 0;
					color: #0c4a6e;
					font-size: 13px;
					font-weight: 500;
					text-align: center;

					strong {
						color: #059669;
						margin-right: 6px;
					}
				}

				.field-error {
					background-color: #fef2f2;
					border: 1px solid #fecaca;
					border-radius: 6px;
					padding: 12px 16px;
					margin: 16px 0;
					color: #dc2626;
					font-size: 13px;
					font-weight: 500;
					text-align: center;
				}

				&.edit-mode,
				&:has(.simplyin-confirm-card-button.edit-mode) {
					.form-control {
						opacity: 0.5;
						pointer-events: none;
					}

					.card-field {
						opacity: 0.4 !important;
						pointer-events: none !important;

						.ccIframe-component {
							pointer-events: none !important;
							opacity: 0.6;
						}
					}
				}
			}

			@media (max-width: 768px) {
				.simplyin-add-card-iframe-container {
					padding: 16px 0;
				}

				.simplyin-add-card-info p {
					font-size: 11px;
					padding: 10px 12px;
				}

				.simplyin-add-card-iframe {
					.simplyin-card-success {
						font-size: 12px;
						padding: 10px 12px;
					}

					.form-group {
						.form-control {
							font-size: 14px;
							padding: 9px 10px;
						}

						.card-field .ccIframe-component {
							padding: 9px 10px;
							font-size: 14px;
						}
					}
				}
			}

			@media (max-width: 480px) {
				.simplyin-add-card-iframe-container {
					padding: 12px 0;
					border-radius: 6px;
				}

				.simplyin-add-card-iframe {
					.simplyin-card-success {
						font-size: 11px;
						padding: 8px 10px;
					}

					.form-group {
						margin-bottom: 12px;

						.form-control {
							padding: 8px;
							font-size: 14px;
						}

						.card-field .ccIframe-component {
							padding: 8px;
							font-size: 14px;

							iframe {
								height: 20px !important;
								min-height: 20px !important;
							}
						}
					}

					.field-error {
						font-size: 11px;
						padding: 8px 10px;
					}
				}
			}
		}
	}
}

.simplyin-block-payment {
	display: flex;
	flex-direction: column;

	&-item {
		&.simplyin-blik {
			.simplyin-blik-field-container {
				--simplyin-primary: #{$color-primary};
				--simplyin-text: #333;
				--simplyin-border: #{$color-secondary};
			}

			input.blik-input {
				display: none !important;
			}
		}
	}
}

// Style dla plus ikony w opcji dodawania karty
.simplyin-plus-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #6b7280;

	&:hover {
		color: $color-primary;
	}

	svg {
		width: 18px;
		height: 18px;
	}
}

.simplyin-block-payment-item.simplyin-add-card {
	.simplyin-item-top {
		input[type="radio"] {
			display: none !important;
		}
	}

	// Gdy opcja wybrana - tylko zmiana koloru
	label.simplyin-active .simplyin-plus-icon,
	&.simplyin-active .simplyin-plus-icon {
		color: var(--simplyin-primary, #3b82f6) !important;

		&:hover {
			color: var(--simplyin-primary-dark, #2563eb) !important;
		}
	}
}

.simplyin-payment-provider-logo {
	max-width: 40px;
	height: auto;
}

#radio-control-wc-payment-method-options-simplyin__label {
	display: flex;
	gap: 5px;
	align-items: center;

	& > span:first-child {
		margin-right: 5px;
	}
}
