@use "../constants" as *;

// Modern Review Banner Component - Compact design
.dbg-lv-review-banner {
	margin: 15px 15px 15px;
	
	.review-card {
		background: $surface-color;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		padding: 16px 20px;
		position: relative;
		border-left: 3px solid $gradient-pro-start;
		transition: all 0.3s ease;

		&:hover {
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
			transform: translateY(-1px);
		}
	}

	.review-content {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 14px;
	}

	.review-icon {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		background: linear-gradient(135deg, $main-theme-color 0%, $gradient-primary-end 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $white;
		font-size: 14px;
		box-shadow: 0 2px 6px rgba($gradient-pro-start, 0.25);
	}

	.review-message {
		flex: 1;
	}

	.review-title {
		font-size: 0.95rem;
		font-weight: 600;
		color: $text-body;
		margin: 0 0 4px 0;
		line-height: 1.3;
	}

	.review-description {
		font-size: 0.8rem;
		color: $text-secondary;
		margin: 0;
		line-height: 1.3;
	}

	.review-actions {
		display: flex;
		gap: 8px;
		align-items: center;
		flex-wrap: wrap;
	}

	.review-secondary-actions {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-left: 4px;
	}

	.review-separator {
		color: $border-muted;
		font-size: 0.75rem;
	}

	.review-text-link {
		font-size: 0.75rem;
		color: $text-muted;
		text-decoration: none;
		transition: color 0.2s ease;

		&:hover {
			color: $text-secondary;
			text-decoration: underline;
		}
	}

	.review-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
		border-radius: 5px;
		transition: all 0.2s ease;
		border: 1px solid transparent;
		cursor: pointer;

		&:focus {
			outline: 2px solid $gradient-pro-start;
			outline-offset: 2px;
		}

		&.btn-primary {
			background: linear-gradient(135deg, $main-theme-color 0%, $gradient-primary-end 100%);
			color: $white;

			&:hover {
				background: linear-gradient(135deg, $main-theme-color 0%, $gradient-primary-end 100%);
				transform: translateY(-1px);
				box-shadow: 0 2px 6px rgba($gradient-pro-start, 0.25);
				color: $white;
				text-decoration: none;
			}
		}

		&.btn-outline-secondary {
			color: $text-secondary;
			border-color: $border-muted;
			background: $surface-light;
			font-size: 0.7rem;  // Make "Maybe Later" button smaller

			&:hover {
				color: $text-body;
				border-color: $text-muted;
					background: $border-muted;
				text-decoration: none;
			}
		}

		i {
			font-size: 0.7rem;
		}
	}

	.review-dismiss {
		position: absolute;
		top: 8px;
		right: 8px;
		background: none;
		border: none;
		color: $text-muted;
		cursor: pointer;
		font-size: 12px;
		padding: 3px;
		border-radius: 3px;
		transition: all 0.2s ease;
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			color: $text-secondary;
			background: $surface-light;
		}

		&:focus {
			outline: 2px solid $gradient-pro-start;
			outline-offset: 1px;
		}
	}

	// Responsive adjustments
	@media (max-width: 768px) {
		margin: 10px 10px;

		.review-card {
			padding: 14px 16px;
		}

		.review-content {
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 8px;
			margin-bottom: 12px;
		}

		.review-actions {
			justify-content: center;
			gap: 6px;
		}

		.review-btn {
			font-size: 0.7rem;
			padding: 5px 10px;
		}
	}

	@media (max-width: 480px) {
		.review-actions {
			flex-direction: column;
			width: 100%;
		}

		.review-btn {
			width: 100%;
			justify-content: center;
		}
	}
}