@use './variable.scss' as v;

.header {
	display: flex;
	justify-content: end;
	align-items: center;
	margin-bottom: 30px;
	background: v.$white;
	padding: 20px 30px;
	border-radius: 20px;
	box-shadow: 0 4px 20px v.$shadow-1;

	@media (max-width: 490px) {
		padding: 20px 20px;
	}

	.header-action {
		display: flex;
		align-items: center;
		gap: 15px;

		.icon-btn {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: v.$bg-light;
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
			position: relative;

			&:hover {
				background: v.$bg-hover;
				transform: translateY(-2px);
			}
		}
	}

	.notification-wrapper,
	.user-menu,
	.tokens-balance {
		position: relative;
	}

	.tokens-balance {
		margin-right: 15px;
	}

	.tokens-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
		background: v.$white;
		color: v.$p-color;
		border: 2px solid v.$p-color;
		padding: 8px 12px;
		border-radius: 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 10px 40px v.$shadow-1;
		font-size: 12px;
		font-weight: 600;
		min-width: 110px;

		@media (max-width: 490px) {
			padding: 8px;
		}
	}

	.tokens-count {
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	.tokens-label {
		font-weight: 500;
		opacity: 0.9;
	}

	.notification-dropdown,
	.user-dropdown {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		background: v.$white;
		border-radius: 12px;
		box-shadow: 10px 10px 20px 10px v.$shadow-1;
		min-width: 320px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1000;

		&.show {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	.notification-dropdown {
		.notification-header {
			padding: 15px 20px;
			border-bottom: 1px solid v.$b-color-1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			h4 {
				margin: 0;
				font-size: 16px;
				font-weight: 600;
				color: v.$text-p;
			}

			.notification-count {
				font-size: 12px;
				color: v.$p-color;
				font-weight: 500;
			}
		}

		.notification-list {
			max-height: 400px;
			overflow-y: auto;
		}

		.notification-item {
			display: flex;
			gap: 12px;
			padding: 15px 20px;
			border-bottom: 1px solid v.$b-color-1;
			transition: background-color 0.2s;
			cursor: pointer;
		}

		.notification-title {
			display: block;
			font-size: 15px;
			font-weight: 700;
			color: v.$text-p;
			margin-bottom: 6px;
		}

		.notification-icon {
			font-size: 24px;
			flex-shrink: 0;
		}

		.notification-text {
			font-size: 13px;
			color: v.$text-s;
			margin-bottom: 4px;
			font-weight: 500;
		}

		.notification-time {
			font-size: 12px;
			color: v.$text-m;
		}

		.notification-footer {
			padding: 12px 20px;
			border-top: 1px solid v.$b-color-1;
			text-align: center;

			.notification-link {
				color: v.$p-color;
				font-size: 14px;
				font-weight: 500;
				text-decoration: none;
			}
		}
	}

	.user-menu {
		.user-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: linear-gradient(45deg, v.$p-color, v.$s-color);
			display: flex;
			align-items: center;
			justify-content: center;
			color: v.$white;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s;
			text-transform: uppercase;
		}

		.user-dropdown {
			min-width: 280px;
		}

		.user-info-header {
			padding: 20px;
			border-bottom: 1px solid v.$b-color-1;
			display: flex;
			gap: 15px;
			align-items: center;
		}

		.user-avatar-large {
			width: 50px;
			height: 50px;
			background: linear-gradient(135deg, v.$p-color, v.$s-color);
			color: v.$white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 20px;
			flex-shrink: 0;
			text-transform: uppercase;
		}

		.user-details {
			flex: 1;
			min-width: 0;
		}

		.user-name {
			font-weight: 600;
			font-size: 15px;
			color: v.$text-p;
			margin-bottom: 4px;
		}

		.user-email,
		.user-subscription-expire {
			font-size: 13px;
			color: v.$text-m;
			margin-bottom: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.user-subscription {
			display: inline-block;
		}

		.user-menu-items {
			padding: 10px 0;
		}

		.user-menu-item {
			display: flex;
			align-items: center;
			padding: 12px 20px;
			text-decoration: none;
			color: v.$text-s;
			transition: background-color 0.2s;

			svg {
				width: 18px;
				height: 18px;
				margin-right: 12px;
			}
		}

		.subscription-badge {
			display: inline-block;
			border-radius: 12px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			background: v.$bg-hover;
			padding: 2px 5px;
		}

		.user-menu-footer {
			border-top: 1px solid v.$b-color-1;
			padding: 10px 0;
		}

		.user-menu-logout {
			display: flex;
			align-items: center;
			padding: 12px 20px;
			text-decoration: none;
			color: v.$red;
			transition: background-color 0.2s;

			svg {
				width: 18px;
				height: 18px;
				margin-right: 12px;
			}
		}
	}

	.header-burger-menu {
		display: none;
		margin-right: auto;
		cursor: pointer;
		color: v.$p-color;

		@media (max-width: 767px) {
			display: block;
		}
	}
}