.page.deposit {
	.empty-state {
		text-align: center;
		padding: 60px 40px;
		background: rgba(68, 138, 255, .05);
		border-radius: var(--radius2);
		border: 2px dashed rgba(68, 138, 255, .2);
		margin-bottom: 40px;
	
		.empty-state-icon {
			margin-bottom: 20px;
			opacity: .6;
	
			svg {
				margin: 0 auto;
				color: var(--geniBlue);
			}
		}
	
		h4 {
			color: var(--textColor);
			font-size: 24px;
			margin-bottom: 10px;
			font-weight: 600;
		}
	
		p {
			color: #78909C;
			margin-bottom: 30px;
			font-size: 16px;
			line-height: 1.5;
		}
	
		.btn {
			font-size: 16px;
			padding: 12px 24px;
		}
	}
	
	.coins-list {
		.coins-actions {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 30px;
			padding: 20px 0;
		}
	
		.coins-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 20px;
			margin-bottom: 40px;
		}
	}
	
	.coin-card {
		background: rgba(68, 138, 255, .08);
		border: 1px solid rgba(68, 138, 255, .15);
		border-radius: var(--radius);
		padding: 20px;
		transition: all .3s ease;

		&:hover {
			border-color: rgba(68, 138, 255, .3);
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(68, 138, 255, .15);
		}

		&.antique-coin {
			box-shadow: inset 0 0 0 1px rgb(220 53 69 / 35%);
			border-color: rgba(220, 53, 69, .15);

			&:hover {
				box-shadow: inset 0 0 0 2px rgb(220 53 69 / 60%);
				border-color: rgba(220, 53, 69, .3);
			}

			.coin-title h5 {
				color: #dc3545;
			}
		}
	
		.coin-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 15px;
	
			.coin-title {
				flex: 1;

				h5 {
					color: var(--textColor);
					font-size: 16px;
					font-weight: 600;
					margin: 0 0 5px 0;
					line-height: 1.3;
					display: flex;
					align-items: center;
					gap: 8px;
				}

				.coin-meta {
					font-size: 13px;
					color: #78909C;
				}


			}
	
			.coin-actions {
				display: flex;
				gap: 8px;
	
				.btn-icon {
					width: 32px;
					height: 32px;
					border: none;
					background: rgba(229, 57, 53, .1);
					color: #e53935;
					border-radius: 6px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					transition: all .2s ease;
	
					&:hover {
						background: rgba(229, 57, 53, .2);
						transform: scale(1.05);
					}
				}

				.btn-edit {
					width: 32px;
					height: 32px;
					border: none;
					background: rgba(68, 138, 255, .1);
					color: var(--geniBlue);
					border-radius: 6px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					transition: all .2s ease;

					&:hover {
						background: rgba(68, 138, 255, .2);
						transform: scale(1.05);
					}
				}
			}
		}
	
		.coin-details {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px 15px;
			font-size: 14px;
	
			.detail-item {
				display: flex;
				justify-content: space-between;
	
				.label {
					color: #78909C;
					font-size: 13px;
				}
	
				.value {
					color: var(--textColor);
					font-weight: 500;
				}
			}
	
			.total-price {
				grid-column: 1 / -1;
				padding-top: 10px;
				border-top: 1px solid rgba(68, 138, 255, .15);
				margin-top: 10px;
	
				.value {
					color: var(--geniBlue);
					font-weight: 600;
					font-size: 16px;
				}
			}
		}
	}
	
	.step-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40px;
		border-top: 1px solid rgba(68, 138, 255, .1);
	
		.navigation-right {
			display: flex;
			align-items: center;
			gap: 20px;
	
			.coins-summary {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 4px;
				font-size: 14px;
				color: #78909C;
	
				span:last-child {
					font-weight: 600;
					color: var(--geniBlue);
					font-size: 16px;
				}
			}
		}
	
		.btn {
			font-size: 16px;
			padding: 12px 24px;
	
			&.btn-secondary {
				background: rgba(120, 144, 156, .1);
				color: #78909C;
				border: 1px solid rgba(120, 144, 156, .2);
	
				&:hover {
					background: rgba(120, 144, 156, .15);
					color: var(--textColor);
				}
			}
	
			&.btn-primary {
				background: var(--geniBlue);
				color: white;
				border: 1px solid var(--geniBlue);
	
				&:hover {
					background: var(--geniBlueLight);
					transform: translateY(-1px);
				}
			}
		}
	}

	.btn-delete-address {
		background: none;
		border: none;
		color: #e53935;
		cursor: pointer;
		padding: 2px;
		border-radius: 3px;
		margin-left: auto;
		opacity: .6;
		width: 20px;
		height: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&:hover {
			opacity: 1;
			background: rgba(229, 57, 53, .1);
		}

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

	.deposit-container {
		.newDeposit {
			width: min(768px, 90vw);
			background-color: var(--bgGray);
			border-radius: var(--radius);
			padding: var(--padding);
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

			.close {
				position: absolute;
				right: 10px;
				top: 10px;
				background-color: transparent;
				border: 0;
				cursor: pointer;
				width: 1.5em;
				padding: 0;
				font-size: 1.4em;
				color: #666;
				transition: color 0.2s ease;

				&:hover {
					color: #e53935;
				}
			}

			.form-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
				max-width: 900px;
				margin: 0 auto;

				.form-group {
					display: flex;
					flex-direction: column;
					gap: 6px;

					&[data-name="submit"] {
						grid-column: 1 / -1;
						margin-top: 20px;
						justify-content: center;

						.btn {
							padding: 14px 32px;
							font-size: 16px;
							font-weight: 500;
							border-radius: var(--radius);
							background: var(--geniBlue);
							color: white;
							border: 1px solid var(--geniBlue);
							cursor: pointer;
							transition: all 0.3s ease;
							width: auto;
							min-width: 200px;

							&:hover:not(:disabled) {
								background: var(--geniBlueLight);
								transform: translateY(-1px);
								box-shadow: 0 2px 8px rgba(68, 138, 255, 0.3);
							}

							&:disabled {
								opacity: 0.7;
								cursor: not-allowed;
								transform: none;
							}
						}
					}

					&[data-name="photoHD"] {
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.form-label {
							margin-bottom: 0;
							margin-right: 16px;
						}

						.toggle {
							display: block;
							flex: 1;
						}

						input[switch] {
							width: auto;
							height: auto;
						}
					}

					.form-label {
						font-size: 13px;
						margin-bottom: 4px;
						color: #555;
						font-weight: 500;

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

					.form-input {
						padding: 12px 16px;
						border: 1px solid rgba(120, 144, 156, 0.3);
						border-radius: var(--radius);
						background: var(--bgGray);
						color: #333;
						font-size: 14px;
						transition: all 0.3s ease;

						&:focus {
							outline: none;
							border-color: var(--geniBlue);
							background: white;
							box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.15);
						}

						&::placeholder {
							color: #999;
							font-size: 14px;
						}

						&[type="number"] {
							-moz-appearance: textfield;

							&::-webkit-outer-spin-button,
							&::-webkit-inner-spin-button {
								-webkit-appearance: none;
								margin: 0;
							}
						}
					}

					select.form-input {
						cursor: pointer;
						background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
						background-position: right 12px center;
						background-repeat: no-repeat;
						background-size: 16px;
						padding-right: 40px;
					}
				}
			}
		}

		dl.select {
			> div {
				border-radius: 20px;
				padding: 20px 40px;
				min-height: auto;
				box-shadow: inset 0 0 0 1px rgba(144, 202, 249, 0.25);
				background: rgba(144, 202, 249, 0.1);
				cursor: pointer;
				transition: all 0.2s ease;

				&:hover {
					box-shadow: inset 0 0 0 2px rgba(144, 202, 249, 0.4);
					background: rgba(144, 202, 249, 0.15);
				}

				+ div {
					margin-top: 10px;
				}
			}

			dt {
				font-size: 20px;
				font-weight: 500;
				color: var(--textColor);
			}

			dd {
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				margin-top: 4px;
			}
		}
	}

	.newDeposit.chooseType {
		max-width: 650px;
		background: white;
		border: none;
		padding: 50px 40px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, .1);

		.hx {
			color: #1a1a1a;
			font-size: 28px;
			font-weight: 600;
			margin-bottom: 8px;
			text-align: center;
		}

		> p {
			color: #546E7A;
			font-size: 15px;
			text-align: center;
			margin-bottom: 40px;
			line-height: 1.5;
		}

		.close {
			color: #666;

			&:hover {
				color: #e53935;
			}
		}

		.coin-type-buttons {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;

			.btn {
				background: white;
				border: 2px solid rgba(68, 138, 255, .3);
				border-radius: 12px;
				padding: 48px 24px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 8px;
				cursor: pointer;
				transition: all .25s ease;

				&:hover {
					border-color: var(--geniBlue);
					background: rgba(68, 138, 255, .06);
					box-shadow: 0 4px 16px rgba(68, 138, 255, .2);

					.text {
						color: var(--geniBlue);
					}

					small {
						color: #546E7A;
					}
				}

				.text {
					font-size: 18px;
					font-weight: 600;
					color: #1a1a1a;
					transition: color .25s ease;
				}

				small {
					font-size: 13px;
					color: #90A4AE;
					font-weight: 400;
					transition: color .25s ease;
				}
			}
		}

		@media (max-width: 640px) {
			padding: 40px 24px;

			.hx {
				font-size: 24px;
			}

			.coin-type-buttons {
				grid-template-columns: 1fr;
				gap: 16px;

				.btn {
					padding: 36px 20px;
				}
			}
		}
	}

	.newDeposit {
		background-color: #ECEFF1;

		.hx {
			.coin-type-modern {
				color: var(--geniBlue);
			}

			.coin-type-antique {
				color: #dc3545;
			}
		}

		.form-grid .form-group {
			display: flex;
			flex-direction: column;
			gap: 6px;

			&[data-name="submit"] {
				grid-column: 1 / -1;
				margin-top: 20px;
				justify-content: center;

				.btn {
					padding: 14px 32px;
					font-size: 16px;
					font-weight: 500;
					border-radius: var(--radius);
					background: var(--geniBlue);
					color: white;
					border: 1px solid var(--geniBlue);
					cursor: pointer;
					transition: all .3s ease;
					width: auto;
					min-width: 200px;

					&:hover {
						background: var(--geniBlueLight);
						transform: translateY(-1px);
					}

					&:disabled {
						opacity: .7;
						cursor: not-allowed;
						transform: none;
					}
				}
			}

			&[data-name="photoHD"] {
				flex-direction: column;
				align-items: flex-start;

				.form-label {
					margin-bottom: 8px;
				}
			}

			.form-label {
				font-size: 13px;
				margin-bottom: 4px;

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

			.form-input {
				padding: 12px 16px;
				border: 1px solid rgba(120, 144, 156, .3);
				border-radius: var(--radius);
				background: #E2E2E2;
				color: #333;
				font-size: 14px;
				transition: all .3s ease;

				&:focus {
					outline: none;
					border-color: var(--geniBlue);
					background: white;
					box-shadow: 0 0 0 3px rgba(68, 138, 255, .15);
				}

				&::placeholder {
					color: #999;
					font-size: 14px;
				}
			}

			input[type="number"] {
				-moz-appearance: textfield;

				&::-webkit-outer-spin-button,
				&::-webkit-inner-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}
			}

			input[switch] {
				width: auto;
				height: auto;
			}
		}

		.toggle { display: block; flex: 1; }
		.form-group[data-name="photoHD"] {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-radius: 8px;

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

			input[type="checkbox"][switch] {
				-webkit-appearance: none;
				appearance: none;
				position: relative;
				width: 50px;
				height: 28px;
				background: #ccc;
				border-radius: 28px;
				cursor: pointer;
				transition: background-color .3s ease;
				transform: none;
				margin: 0;
				min-height: 0;
				display: block;

				&::before {
					content: '';
					position: absolute;
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: white;
					top: 2px;
					left: 2px;
					transition: transform .3s ease;
					box-shadow: 0 1px 3px rgba(0,0,0,.2);
				}

				&:checked {
					background: var(--geniBlue);

					&::before {
						transform: translateX(22px);
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.newDeposit {
			width: 100%;
			margin: 0 16px;
			padding: 24px;

			.form-grid {
				grid-template-columns: 1fr;
				gap: 16px;

				.form-group[data-name="photoHD"] {
					flex-direction: column;
					align-items: flex-start;

					.form-label {
						margin-bottom: 8px;
						margin-right: 0;
					}
				}
			}
		}
	}

	@media (min-width: 1200px) {
		& {
			padding-right: 360px;
		}
	}
}