/* Shared TPO Connect styles: the save button, the toast notification, the loader overlay and the Gravity Forms field skin. */

/* SAVE BUTTON */
.tcdc-save-btn, .tcdc-submit-btn {
	width: 120px;
	height: 40px;
	background-color: #1254a5;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 10px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease-in-out;

	&[disabled] {
		background-color: #9ba4ae;
		cursor: not-allowed;
	}

	&:hover:not([disabled]) {
		background-color: #166dd7;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		transform: translateY(-2px);
	}
}

/* TOAST NOTIFICATION */
.tcdc-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tcdc-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 300px;
	max-width: 400px;
	padding: 16px;
	background: #fff;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateX(120%);
	transition: transform 0.4s ease;
	border-left: 6px solid;

	&.tcdc-toast--visible {
		transform: translateX(0);
	}

	&.tcdc-toast--success {
		border-left-color: #28a745;
	}

	&.tcdc-toast--error {
		border-left-color: #dc3545;
	}

	.tcdc-toast__icon {
		flex-shrink: 0;
		width: 24px;
		height: 24px;

		svg {
			width: 100%;
			height: 100%;
		}
	}

	&.tcdc-toast--success .tcdc-toast__icon {
		color: #28a745;
	}

	&.tcdc-toast--error .tcdc-toast__icon {
		color: #dc3545;
	}

	.tcdc-toast__content {
		flex: 1;
		min-width: 0;
	}

	.tcdc-toast__title {
		font-weight: 600;
		font-size: 15px;
		color: #302f2f;
		margin-bottom: 4px;
	}

	.tcdc-toast__message {
		font-size: 14px;
		color: #666;
		line-height: 1.4;
	}

	.tcdc-toast__close {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
		color: #999;
		transition: color 0.2s ease;

		&:hover {
			color: #333;
		}

		svg {
			width: 100%;
			height: 100%;
		}
	}
}

/* LOADER */
.loader-container {
	display: none;
	position: fixed;
	inset: 0;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	background: rgba(25, 25, 25, 0.5);

	.loader-message-container {
		display: flex;
		align-items: center;
		flex-direction: column;

		.loader-message {
			color: #f5f5f5;
			font-weight: 400;
			font-size: 1rem;
			font-family: ProximaNova-Regular, Helvetica, Arial, sans-serif;
		}

		.calculator-spinner {
			animation: spin 1s linear infinite;
			/* Inlined as a data URI because the old rule pointed at a sibling folder of the plugin being replaced. */
			background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnMgaWQ9ImRlZnMzIj48c3R5bGUgaWQ9InN0eWxlNSI+LmF7ZmlsbDojZmZmfS5ie2ZpbGw6I2U0ZTRlNH0uY3tmaWxsOiMxMzk0ZTV9I0xheWVyXzF7d2lkdGg6NDhweDttYXJnaW46YXV0b308L3N0eWxlPjwvZGVmcz48ZyBpZD0icm90YXRlU3F1YXJlIiB0cmFuc2Zvcm09InNjYWxlKDEuMDkwOSkiPjxjaXJjbGUgY2xhc3M9ImEiIGN4PSIyMiIgY3k9IjIyIiByPSIyMiIgaWQ9ImNpcmNsZTgiIGZpbGw9IiNmZmYiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTIyIDEwYTEyIDEyIDAgMSAxLTEyIDEyIDEyIDEyIDAgMCAxIDEyLTEybTAtMmExNCAxNCAwIDEgMCAxNCAxNEExNCAxNCAwIDAgMCAyMiA4eiIgaWQ9InBhdGgxMCIgZmlsbD0iI2U0ZTRlNCIvPjxwYXRoIGNsYXNzPSJjIiBkPSJNMjIgOHYyYTEyIDEyIDAgMCAxIDEyIDEyaDJBMTQgMTQgMCAwIDAgMjIgOHoiIGlkPSJwYXRoMTIiIGZpbGw9IiMxMzk0ZTUiLz48L2c+PC9zdmc+") no-repeat;
			content: "";
			display: flex;
			height: 52px;
			margin: 0 auto;
			width: 52px;
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.gform-body.gform_body {
	.gform_fields {
		.gfield {
			/* Style labels for readonly/disabled fields */
			&:has(input[readonly]),
			&:has(input[disabled]),
			&:has(select[disabled]),
			&:has(textarea[readonly]),
			&:has(textarea[disabled]) {
				.gfield_label {
					color: #0000006b;
				}
			}

			.gfield_label {
				font-weight: 700;
				font-size: 15px;
				color: #302f2f;
			}

			.ginput_container {
				input {
					background-color: #ffffff;
					color: #302f2f;
					border-radius: 4px;
					border: 1px solid #e5e5e5;
					padding: 7px 5px;
					transition: all 0.2s ease;

					&::placeholder {
						color: #302f2f;
					}
				}

				select {
					background-color: #ffffff;
					color: #302f2f;
					border-radius: 4px;
					border: 1px solid #e5e5e5;
					padding: 7px 5px;
					transition: all 0.2s ease;
				}

				textarea {
					background-color: #ffffff;
					color: #302f2f;
					border-radius: 4px;
					border: 1px solid #e5e5e5;
					padding: 7px 5px;
					transition: all 0.2s ease;
				}
			}
		}

		.gfield.SS_read_only {
			.ginput_container {
				input {
					background-color: #1254a5;
					color: #ffffff;
					border-radius: 4px;
					border: none;
					padding: 7px 5px;
					transition: all 0.2s ease;
					font-weight: 600;

					&::placeholder {
						color: #ffffff;
					}
				}
			}
		}
	}
}