dialog {
	padding: 64px;
	border-radius: 32px;
	background: #ECEFF1;
	margin: auto;

	.form-label {
		margin-bottom: 2px;
		font-size: 12px;
		color: #555;

		&.required::after {
			content: ' *';
			color: #e53935;
		}
	}

	::placeholder { color: #AAA; }

	&#virement-dialog {
		margin-bottom: 0;
		background-color: var(--geniBlueDark);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		max-width: min(90vw, 1100px);
		width: auto;
		color: white;

		.close {
			position: absolute;
			top: 16px;
			right: 16px;
			background: transparent;
			border: none;
			cursor: pointer;
			padding: 8px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			transition: all .2s ease;

			&:hover {
				background: rgba(255, 255, 255, .8);
				color: var(--geniBlueDark);
			}

			.icon {
				width: 20px;
				height: 20px;
			}
		}

		.download-btn {
			width: 100%;
			max-width: 400px;
			margin: 20px auto;
			display: block;
			padding: 16px 20px;
			white-space: normal;
			height: auto;
			min-height: auto;

			.text {
				white-space: normal;
				line-height: 1.3;
				word-break: break-word;
				display: block;
			}
		}

		.virement-address {
			background: rgba(68, 138, 255, .08);
			padding: 16px;
			border-radius: 12px;
			margin: 16px 0;
			border-left: 4px solid var(--geniBlue);
		}

		code {
			background: rgba(68, 138, 255, .15);
			padding: 4px 8px;
			border-radius: 6px;
			font-weight: 600;
			color: var(--geniBlue);
		}

		@media (max-width: 768px) {
			width: 95vw;
			padding: 32px 20px;

			.close {
				top: 12px;
				right: 12px;
			}

			.download-btn {
				margin: 16px auto;
				padding: 14px 16px;

				.text {
					font-size: 14px;
				}
			}
		}
	}

	&#delete-confirmation-dialog {
		max-width: 460px;
		width: 90vw;
		padding: 0;
		border: none;
		background: white;
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
		overflow: hidden;

		.dialog-content {
			padding: 40px 36px 32px;
		}

		h3 {
			margin: 0 0 16px 0;
			font-size: 1.5em;
			font-weight: 600;
			color: #1a1a1a;
			letter-spacing: -0.015em;
			line-height: 1.2;

			.text {
				font-size: 1em;
			}
		}

		p {
			margin: 0 0 32px 0;
			font-size: 1em;
			color: #666;
			line-height: 1.6;
		}

		.dialog-actions {
			display: flex;
			gap: 12px;
			justify-content: stretch;

			.btn {
				flex: 1;
				padding: 16px 24px;
				font-size: 1em;
				font-weight: 500;
				min-height: 52px;
				border-radius: 10px;
				border: none;
				cursor: pointer;
				transition: all 0.15s ease;

				&:active {
					transform: scale(0.98);
				}
			}

			.btn-secondary {
				background: #f0f0f0;
				color: #333;

				&:hover {
					background: #e5e5e5;
				}
			}

			.btn-delete {
				background: linear-gradient(135deg, #ff6b6b 0%, #ee5252 100%);
				color: white;
				box-shadow: 0 2px 8px rgba(238, 82, 82, 0.25);

				&:hover {
					background: linear-gradient(135deg, #ff5555 0%, #dd4343 100%);
					box-shadow: 0 4px 12px rgba(238, 82, 82, 0.35);
				}
			}
		}

		@media (max-width: 480px) {
			.dialog-content {
				padding: 36px 28px 28px;
			}

			h3 {
				font-size: 1.35em;
			}

			p {
				font-size: 0.95em;
				margin-bottom: 28px;
			}

			.dialog-actions {
				flex-direction: column;
				gap: 10px;

				.btn {
					width: 100%;
				}
			}
		}
	}

	&::backdrop { background: rgba(0, 0, 0, .75); }

	.close {
		position: absolute;
		right: 10px;
		top: 10px;
		background-color: transparent;
		border: 0;
		font-size: 2em;
		cursor: pointer;
		width: 1.5em;
		padding: 0;
		font-size: 1.4em;
	
		&:hover {
			color: red;
		}
	}
}